@memberjunction/ng-dashboards 6.1.0-edge.2 → 6.1.0-edge.4

package/dist/Workflows/components/workflow-runs-resource.component.js

@@ -4,11 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+var WorkflowRunsResourceComponent_1;
+import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { CompositeKey, RunView } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { ComputeTasksToBlock } from '@memberjunction/ai-core-plus';
 import { ParseJSONRecursive, RegisterClass, UUIDsEqual } from '@memberjunction/global';
 import { BaseDashboard, BaseResourceComponent } from '@memberjunction/ng-shared';
+import { TaskGraphDebuggerComponent } from '@memberjunction/ng-task-graph-editor';
 import { SortWorkflowRuns } from './workflow-run-sorting';
+import { WorkflowRunLayout } from './workflow-run-layout';
+import { EmptyDebugState, ParseWorkflowRunParentBag, TryParseJsonObject, } from './workflow-run-debug-state';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -16,16 +22,19 @@ import * as i3 from "@memberjunction/ng-ui-components";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "@memberjunction/ng-task-graph-editor";
 import * as i6 from "@memberjunction/ng-code-editor";
+import * as i7 from "angular-split";
 const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.passNumber;
+const _forTrack2 = ($index, $item) => $item.edgeId;
 function WorkflowRunsResourceComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-stat-badge", 2);
+    i0.ɵɵelement(0, "mj-stat-badge", 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Count", ctx_r0.VisibleRuns.length)("Total", ctx_r0.Runs.length);
 } }
 function WorkflowRunsResourceComponent_For_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵelementStart(0, "button", 15);
     i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_For_10_Template_button_click_0_listener() { const status_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnFilterByStatus(status_r3)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -37,39 +46,39 @@ function WorkflowRunsResourceComponent_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", status_r3 === "all" ? "All" : status_r3, " ");
 } }
 function WorkflowRunsResourceComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 9);
+    i0.ɵɵelement(0, "mj-loading", 10);
 } }
 function WorkflowRunsResourceComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-alert", 10);
+    i0.ɵɵelement(0, "mj-alert", 11);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Message", ctx_r0.LoadError);
 } }
 function WorkflowRunsResourceComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 11);
+    i0.ɵɵelement(0, "mj-empty-state", 12);
 } }
 function WorkflowRunsResourceComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 12);
+    i0.ɵɵelement(0, "mj-empty-state", 13);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_For_19_Template(rf, ctx) { if (rf & 1) {
+function WorkflowRunsResourceComponent_Conditional_16_For_20_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_For_19_Template_button_click_0_listener() { const run_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSelectRun(run_r6)); });
-    i0.ɵɵelementStart(1, "span", 26);
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_For_20_Template_button_click_0_listener() { const run_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSelectRun(run_r6)); });
+    i0.ɵɵelementStart(1, "span", 29);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵelementStart(3, "span", 30);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 27);
+    i0.ɵɵelementStart(6, "span", 30);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 28);
+    i0.ɵɵelementStart(9, "span", 31);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 29);
+    i0.ɵɵelementStart(11, "span", 32);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -89,123 +98,689 @@ function WorkflowRunsResourceComponent_Conditional_16_For_19_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(run_r6.Status);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const selected_r9 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnOpenAgentRun(selected_r9)); });
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const selected_r9 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnOpenAgentRun(selected_r9)); });
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵtext(2, " Agent run ");
     i0.ɵɵelementEnd();
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 48);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleStepPanel()); });
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r0.Layout.StepPanelOpen ? "Hide step details" : "Show step details");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-square-caret-right", ctx_r0.Layout.StepPanelOpen)("fa-square-caret-left", !ctx_r0.Layout.StepPanelOpen);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "code");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Stall.conditionText);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Stall.reason);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_For_2_Template_button_click_0_listener() { const step_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnSelectStep(step_r12)); });
-    i0.ɵɵelementStart(1, "span", 54);
+    i0.ɵɵelementStart(0, "div", 57)(1, "button", 58);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnOverrideEdge(ctx_r0.Stall.edgeID, "true")); });
+    i0.ɵɵtext(2, " Answer true ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 59);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnOverrideEdge(ctx_r0.Stall.edgeID, "false")); });
+    i0.ɵɵtext(4, " Answer false ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 49);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnDismissStall()); });
+    i0.ɵɵtext(6, " Leave held ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 54);
+    i0.ɵɵelementStart(3, "div", 55)(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_6_Template, 2, 1, "code");
+    i0.ɵɵconditionalCreate(7, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_7_Template, 2, 1, "span", 56);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(8, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Conditional_8_Template, 7, 2, "div", 57);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("data-kind", ctx_r0.Stall.kind);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.Stall.message);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Stall.conditionText ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Stall.reason ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Stall.kind === "held" && ctx_r0.Stall.edgeID ? 8 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnReplayReset()); });
+    i0.ɵɵtext(1, "Now");
+    i0.ɵɵelementEnd();
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(2, "input", 69);
+    i0.ɵɵlistener("input", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnReplayScrub($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Conditional_3_Template, 2, 0, "button", 38);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", ctx_r0.ReplayPercent ?? 100);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ReplayPercent !== null ? 3 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 70);
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 55);
-    i0.ɵɵtext(4);
+} if (rf & 2) {
+    i0.ɵɵnextContext(2);
+    const GraphDebug_r15 = i0.ɵɵreference(4);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Paused at ", ctx_r0.StepName(GraphDebug_r15.PausedAtTaskID), " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_For_3_Template_button_click_0_listener() { const id_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnSelectBreakpoint(id_r17)); });
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "span", 75);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_For_3_Template_span_click_3_listener($event) { const id_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); ctx_r0.OnRemoveBreakpoint(id_r17); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtext(4, "\u00D7");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const id_r17 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.StepName(id_r17), " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵconditionalCreate(1, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_Conditional_1_Template, 3, 1, "span", 70);
+    i0.ɵɵrepeaterCreate(2, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_For_3_Template, 5, 1, "button", 71, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 33);
-    i0.ɵɵtext(6);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const GraphDebug_r15 = i0.ɵɵreference(4);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(GraphDebug_r15.PausedAtTaskID ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(GraphDebug_r15.Breakpoints);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 78);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tick_r18 = ctx.$implicit;
+    i0.ɵɵclassProp("wfr-tick-held", (tick_r18.heldCount ?? 0) > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate4(" #", tick_r18.passNumber, " \u00B7 ready ", tick_r18.eligibleCount ?? 0, " \u00B7 held ", tick_r18.heldCount ?? 0, " \u00B7 took ", tick_r18.claimedCount ?? 0, " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 77);
+    i0.ɵɵtext(1, "\u23F8 paused \u2014 nothing new starts");
+    i0.ɵɵelementEnd();
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵrepeaterCreate(1, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_For_2_Template, 2, 6, "span", 76, _forTrack1);
+    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_Conditional_3_Template, 2, 0, "span", 77);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const GraphDebug_r15 = i0.ɵɵreference(4);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.EngineTicks);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(GraphDebug_r15.Paused ? 3 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 67);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 83);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_For_2_Template_button_click_0_listener() { const step_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnSelectStep(step_r20)); });
+    i0.ɵɵelementStart(1, "span", 84);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 85);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const step_r12 = ctx.$implicit;
+    const step_r20 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("wfr-step-selected", step_r12.ID === ctx_r0.SelectedStepID);
-    i0.ɵɵattribute("data-status", step_r12.Status);
+    i0.ɵɵclassProp("wfr-step-selected", step_r20.ID === ctx_r0.SelectedStepID);
+    i0.ɵɵattribute("data-status", step_r20.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(step_r20.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(step_r20.StepType || "Step");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("forced ", ctx_r0.SelectedEdgeOverride);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "code");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const edge_r21 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(edge_r21.Condition);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Unconditional \u2014 this path always runs.");
+    i0.ɵɵelementEnd();
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 93);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const edge_r21 = i0.ɵɵnextContext(2); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnOverrideEdge(edge_r21.ID, null)); });
+    i0.ɵɵtext(1, "Clear override");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90)(1, "button", 58);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r22); const edge_r21 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnOverrideEdge(edge_r21.ID, "true")); });
+    i0.ɵɵtext(2, "Answer true");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 59);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r22); const edge_r21 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnOverrideEdge(edge_r21.ID, "false")); });
+    i0.ɵɵtext(4, "Answer false");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Conditional_5_Template, 2, 1, "button", 92);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(step_r12.Name);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(step_r12.StepType || "Step");
+    i0.ɵɵconditional(ctx_r0.SelectedEdgeOverride ? 5 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 91);
+    i0.ɵɵtext(1, "Skip the target step instead of overriding an unconditional path.");
+    i0.ɵɵelementEnd();
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81)(1, "div", 86)(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_4_Template, 2, 1, "span", 87);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 88)(6, "span", 89);
+    i0.ɵɵtext(7, "Condition");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_8_Template, 2, 1, "code")(9, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_9_Template, 2, 0, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_10_Template, 6, 3, "div", 90)(11, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Conditional_11_Template, 2, 0, "p", 91);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const edge_r21 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r0.SelectedEdgeFromName, " \u2192 ", ctx_r0.SelectedEdgeToName);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-status", step_r12.Status);
+    i0.ɵɵconditional(ctx_r0.SelectedEdgeOverride ? 4 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((edge_r21.Condition == null ? null : edge_r21.Condition.trim()) ? 8 : 9);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.SelectedEdgeIsConditional ? 10 : 11);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const progress_r26 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" (", progress_r26.progressPercent, "%) ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "span", 89);
+    i0.ɵɵtext(2, "Doing now");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵconditionalCreate(5, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_8_Conditional_5_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const progress_r26 = ctx;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", progress_r26.progressMessage, " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(step_r12.Status);
+    i0.ɵɵconditional(progress_r26.progressPercent != null ? 5 : -1);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 56);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const claim_r27 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", claim_r27.claimedBy, " \u2014 working ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const claim_r27 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", claim_r27.claimedBy, " \u2014 lost, will be requeued ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " requeued by the engine ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "span", 89);
+    i0.ɵɵtext(2, "Worker");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵconditionalCreate(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_4_Template, 1, 1)(5, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_5_Template, 1, 1)(6, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Case_6_Template, 1, 0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_11_0;
+    const claim_r27 = ctx;
+    i0.ɵɵclassProp("wfr-insp-bad", claim_r27.claimEvent === "heartbeat-lost");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((tmp_11_0 = claim_r27.claimEvent) === "claimed" ? 4 : tmp_11_0 === "heartbeat-lost" ? 5 : tmp_11_0 === "reclaimed" ? 6 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Path taken ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Path not taken ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Path can't be answered ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "code");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const verdict_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(verdict_r28.conditionText);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const verdict_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" \u2014 ", verdict_r28.reason, " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "span", 89);
+    i0.ɵɵconditionalCreate(2, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_2_Template, 1, 0)(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_3_Template, 1, 0)(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Case_4_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵconditionalCreate(6, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Conditional_6_Template, 2, 1, "code");
+    i0.ɵɵconditionalCreate(7, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Conditional_7_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_19_0;
+    const verdict_r28 = ctx.$implicit;
+    i0.ɵɵattribute("data-verdict", verdict_r28.verdict);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_19_0 = verdict_r28.verdict) === "satisfied" ? 2 : tmp_19_0 === "notTaken" ? 3 : tmp_19_0 === "held" ? 4 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(verdict_r28.conditionText ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(verdict_r28.reason ? 7 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "span", 89);
+    i0.ɵɵtext(2, "If this step fails");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const whatIf_r29 = ctx;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate2("", whatIf_r29.BlockedCount, " step", whatIf_r29.BlockedCount === 1 ? "" : "s", " can no longer run");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 103);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const step_r25 = i0.ɵɵnextContext(2); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnSkipStep(step_r25)); });
+    i0.ɵɵelement(1, "i", 104);
+    i0.ɵɵtext(2, " Skip step ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const step_r25 = i0.ɵɵnextContext(2); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OpenEditInput(step_r25)); });
+    i0.ɵɵelement(1, "i", 105);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "mj-code-editor", 57);
+} if (rf & 2) {
+    const step_r25 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", step_r25.Status === "Failed" ? "Edit input & retry" : "Edit input", " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const step_r25 = i0.ɵɵnextContext(2); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnRetryStep(step_r25)); });
+    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵtext(2, " Retry ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const step_r25 = i0.ɵɵnextContext(2); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OpenForceComplete(step_r25)); });
+    i0.ɵɵelement(1, "i", 108);
+    i0.ɵɵtext(2, " Force complete ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵconditionalCreate(1, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_1_Template, 3, 1, "button", 100);
+    i0.ɵɵconditionalCreate(2, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_2_Template, 3, 2, "button", 101);
+    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_3_Template, 3, 1, "button", 101);
+    i0.ɵɵconditionalCreate(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Conditional_4_Template, 3, 1, "button", 102);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const step_r25 = i0.ɵɵnextContext();
     const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r25.Status === "Pending" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.CanEditInput(step_r25) ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r25.Status === "Failed" ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.CanForceComplete(step_r25) ? 4 : -1);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 110);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.EditInputError);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 97)(1, "span", 89);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 91);
+    i0.ɵɵtext(4, "Applies to this run only. Invalid JSON is refused here.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "textarea", 109);
+    i0.ɵɵtwoWayListener("ngModelChange", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Template_textarea_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(6); i0.ɵɵtwoWayBindingSet(ctx_r0.EditInputJson, $event) || (ctx_r0.EditInputJson = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Conditional_6_Template, 2, 1, "span", 110);
+    i0.ɵɵelementStart(7, "div", 90)(8, "button", 58);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r34); const step_r25 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.SubmitEditInput(step_r25)); });
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 49);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.EditInputOpen = false); });
+    i0.ɵɵtext(11, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const step_r25 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(step_r25.Status === "Failed" ? "Edit input and retry" : "Edit input");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EditInputJson);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EditInputError ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx.Name);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", step_r25.Status === "Failed" ? "Apply & retry" : "Apply", " ");
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 110);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(7);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngModel", ctx_r0.SelectedStepJson)("language", "json")("readonly", true);
+    i0.ɵɵtextInterpolate(ctx_r0.ForceCompleteError);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 52);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 98)(1, "span", 89);
+    i0.ɵɵtext(2, "Force complete");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 91);
+    i0.ɵɵtext(4, "Downstream conditions will evaluate against this output as if the step had produced it. Type the step name to confirm.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "textarea", 111);
+    i0.ɵɵtwoWayListener("ngModelChange", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template_textarea_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(6); i0.ɵɵtwoWayBindingSet(ctx_r0.ForceCompleteJson, $event) || (ctx_r0.ForceCompleteJson = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "input", 112);
+    i0.ɵɵtwoWayListener("ngModelChange", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(6); i0.ɵɵtwoWayBindingSet(ctx_r0.ForceCompleteName, $event) || (ctx_r0.ForceCompleteName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Conditional_7_Template, 2, 1, "span", 110);
+    i0.ɵɵelementStart(8, "div", 90)(9, "button", 107);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r35); const step_r25 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.SubmitForceComplete(step_r25)); });
+    i0.ɵɵtext(10, "Force complete");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 49);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r0.ForceCompleteOpen = false); });
+    i0.ɵɵtext(12, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const step_r25 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.ForceCompleteJson);
+    i0.ɵɵadvance();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.ForceCompleteName);
+    i0.ɵɵproperty("placeholder", "Type \u201C" + step_r25.Name + "\u201D to confirm");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ForceCompleteError ? 7 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵrepeaterCreate(1, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_For_2_Template, 7, 7, "button", 50, _forTrack0);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81)(1, "div", 86)(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 36);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 94);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Template_button_click_6_listener() { const step_r25 = i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.OnBreakpointToggled({ TaskID: step_r25.ID, Enabled: !ctx_r0.HasBreakpoint(step_r25.ID) })); });
+    i0.ɵɵelement(7, "i", 95);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_8_Template, 6, 2, "div", 88);
+    i0.ɵɵconditionalCreate(9, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_9_Template, 7, 3, "div", 96);
+    i0.ɵɵrepeaterCreate(10, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_For_11_Template, 8, 4, "div", 88, _forTrack2);
+    i0.ɵɵconditionalCreate(12, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_12_Template, 5, 2, "div", 88);
+    i0.ɵɵconditionalCreate(13, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_13_Template, 5, 4, "div", 90);
+    i0.ɵɵconditionalCreate(14, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_14_Template, 12, 5, "div", 97);
+    i0.ɵɵconditionalCreate(15, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Conditional_15_Template, 13, 5, "div", 98);
+    i0.ɵɵelement(16, "mj-task-graph-variables", 99);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Conditional_3_Template, 4, 4, "div", 51)(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Conditional_4_Template, 1, 0, "mj-empty-state", 52);
 } if (rf & 2) {
-    let tmp_6_0;
+    let tmp_17_0;
+    let tmp_18_0;
+    let tmp_20_0;
+    const step_r25 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(step_r25.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", step_r25.Status);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(step_r25.Status);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("wfr-bp-on", ctx_r0.HasBreakpoint(step_r25.ID));
+    i0.ɵɵproperty("disabled", ctx_r0.ControlBusy)("title", ctx_r0.HasBreakpoint(step_r25.ID) ? "Remove breakpoint" : "Break before this step");
+    i0.ɵɵattribute("aria-pressed", ctx_r0.HasBreakpoint(step_r25.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-solid", ctx_r0.HasBreakpoint(step_r25.ID))("fa-regular", !ctx_r0.HasBreakpoint(step_r25.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_17_0 = ctx_r0.SelectedStepProgress) ? 8 : -1, tmp_17_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_18_0 = ctx_r0.SelectedStepClaim) ? 9 : -1, tmp_18_0);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.SelectedStepVerdicts);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_20_0 = ctx_r0.SelectedStepWhatIf) ? 12 : -1, tmp_20_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r25.Status === "Pending" || step_r25.Status === "Failed" || ctx_r0.CanForceComplete(step_r25) ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EditInputOpen ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ForceCompleteOpen ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("InputPayload", ctx_r0.StepPayload(step_r25, "InputPayload"))("OutputPayload", ctx_r0.StepPayload(step_r25, "OutputPayload"))("Invocation", ctx_r0.Invocation);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 82);
+} }
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵrepeaterCreate(1, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_For_2_Template, 5, 5, "button", 80, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_3_Template, 12, 5, "div", 81)(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_4_Template, 17, 21, "div", 81)(5, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Conditional_5_Template, 1, 0, "mj-empty-state", 82);
+} if (rf & 2) {
+    let tmp_7_0;
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.SelectedSteps);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_6_0 = ctx_r0.SelectedStep) ? 3 : 4, tmp_6_0);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r0.InspectorMode === "edge" && ctx_r0.SelectedEdge) ? 3 : (tmp_7_0 = ctx_r0.SelectedStep) ? 4 : 5, tmp_7_0);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "mj-task-graph-run-view", 46);
-    i0.ɵɵlistener("NodeSelected", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Template_mj_task_graph_run_view_NodeSelected_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnGraphNodeSelected($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(2, "div", 47);
-    i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_3_Template, 1, 0, "mj-loading", 48)(4, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Conditional_4_Template, 5, 1);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split", 60);
+    i0.ɵɵlistener("dragEnd", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_as_split_dragEnd_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnStepSplitDragEnd($event.sizes)); });
+    i0.ɵɵelementStart(1, "as-split-area", 17)(2, "div", 61)(3, "mj-task-graph-debugger", 62, 0);
+    i0.ɵɵlistener("NodeSelected", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_NodeSelected_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnGraphNodeSelected($event)); })("ConnectionSelected", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_ConnectionSelected_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnGraphConnectionSelected($event)); })("LegendToggled", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_LegendToggled_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnLegendToggled($event)); })("Settled", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_Settled_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnCanvasSettled()); })("Frame", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_Frame_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnFrame($event)); })("PausedChange", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template_mj_task_graph_debugger_PausedChange_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.DebugPaused = $event); });
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_5_Template, 4, 2, "div", 63);
+    i0.ɵɵconditionalCreate(6, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_6_Template, 4, 1, "div", 64);
+    i0.ɵɵconditionalCreate(7, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_7_Template, 4, 1, "div", 65);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "as-split-area", 26)(9, "div", 66);
+    i0.ɵɵconditionalCreate(10, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_10_Template, 1, 0, "mj-loading", 67)(11, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Conditional_11_Template, 6, 1);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
+    const GraphDebug_r15 = i0.ɵɵreference(4);
     const selected_r9 = i0.ɵɵnextContext();
     const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("direction", ctx_r0.InnerSplitDirection)("gutterSize", 8);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Provider", ctx_r0.ProviderToUse)("ParentTaskID", selected_r9.ID)("WorkflowName", selected_r9.Name)("LiveUpdates", selected_r9.Status === "Running" || selected_r9.Status === "In Progress");
+    i0.ɵɵproperty("size", ctx_r0.Layout.StepPanelOpen ? ctx_r0.Layout.StepSplitSizes[0] : 100)("minSize", 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Provider", ctx_r0.ProviderToUse)("ParentTaskID", selected_r9.ID)("WorkflowName", selected_r9.Name)("LiveUpdates", selected_r9.Status === "Running" || selected_r9.Status === "In Progress")("ReplayAt", ctx_r0.ReplayAt)("ShowLegend", ctx_r0.Layout.ShowLegend);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.StepsLoading ? 3 : 4);
+    i0.ɵɵconditional(ctx_r0.CanReplay ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(GraphDebug_r15.Breakpoints.length > 0 || GraphDebug_r15.PausedAtTaskID ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.EngineTicks.length > 0 ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r0.Layout.StepPanelOpen ? ctx_r0.Layout.StepSplitSizes[1] : 0)("minSize", 20)("visible", ctx_r0.Layout.StepPanelOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.StepsLoading ? 10 : 11);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "mj-code-editor", 57);
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵelement(1, "mj-code-editor", 113);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngModel", ctx_r0.SelectedRunJson)("language", "json")("readonly", true);
 } }
-function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "aside", 24)(1, "header", 30)(2, "div", 31)(3, "span", 32);
+    i0.ɵɵelementStart(0, "aside", 27)(1, "header", 33)(2, "div", 34)(3, "span", 35);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 33);
+    i0.ɵɵelementStart(5, "span", 36);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵconditionalCreate(8, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_8_Template, 3, 0, "button", 35);
-    i0.ɵɵelementStart(9, "button", 36);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template_button_click_9_listener() { const selected_r9 = i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSelectRun(selected_r9)); });
-    i0.ɵɵelement(10, "i", 37);
+    i0.ɵɵelementStart(7, "div", 37);
+    i0.ɵɵconditionalCreate(8, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_8_Template, 3, 0, "button", 38);
+    i0.ɵɵconditionalCreate(9, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_9_Template, 2, 5, "button", 39);
+    i0.ɵɵelementStart(10, "button", 40);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Template_button_click_10_listener() { const selected_r9 = i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnSelectRun(selected_r9)); });
+    i0.ɵɵelement(11, "i", 41);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 38)(12, "button", 39);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDetailTab("graph")); });
-    i0.ɵɵelement(13, "i", 40);
-    i0.ɵɵtext(14, " Workflow ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 39);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDetailTab("json")); });
-    i0.ɵɵelement(16, "i", 41);
-    i0.ɵɵtext(17, " JSON ");
+    i0.ɵɵelementStart(12, "div", 42)(13, "button", 43);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDetailTab("graph")); });
+    i0.ɵɵelement(14, "i", 44);
+    i0.ɵɵtext(15, " Workflow ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 43);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDetailTab("json")); });
+    i0.ɵɵelement(17, "i", 45);
+    i0.ɵɵtext(18, " JSON ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_18_Template, 5, 5)(19, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Conditional_19_Template, 2, 3, "div", 42);
+    i0.ɵɵconditionalCreate(19, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_19_Template, 9, 5, "div", 46);
+    i0.ɵɵconditionalCreate(20, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_20_Template, 12, 17, "as-split", 47)(21, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Conditional_21_Template, 2, 3, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const selected_r9 = ctx;
@@ -218,48 +793,57 @@ function WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template(rf
     i0.ɵɵtextInterpolate(selected_r9.Status);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(selected_r9.AgentRunID ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DetailTab === "graph" ? 9 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("wfr-tab-active", ctx_r0.DetailTab === "graph");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("wfr-tab-active", ctx_r0.DetailTab === "json");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.DetailTab === "graph" ? 18 : 19);
+    i0.ɵɵconditional(ctx_r0.Stall ? 19 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.DetailTab === "graph" ? 20 : 21);
 } }
 function WorkflowRunsResourceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16)(2, "div", 17)(3, "button", 18);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Name")); });
-    i0.ɵɵtext(4, " Workflow ");
-    i0.ɵɵelement(5, "i", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 20);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("StartedAt")); });
-    i0.ɵɵtext(7, " Started ");
-    i0.ɵɵelement(8, "i", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 20);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("CompletedAt")); });
-    i0.ɵɵtext(10, " Ended ");
-    i0.ɵɵelement(11, "i", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 21);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Duration")); });
-    i0.ɵɵtext(13, " Duration ");
-    i0.ɵɵelement(14, "i", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 22);
-    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Status")); });
-    i0.ɵɵtext(16, " Status ");
-    i0.ɵɵelement(17, "i", 19);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(18, WorkflowRunsResourceComponent_Conditional_16_For_19_Template, 13, 14, "button", 23, _forTrack0);
+    i0.ɵɵelementStart(0, "as-split", 16);
+    i0.ɵɵlistener("dragEnd", function WorkflowRunsResourceComponent_Conditional_16_Template_as_split_dragEnd_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSplitDragEnd($event.sizes)); });
+    i0.ɵɵelementStart(1, "as-split-area", 17)(2, "div", 18)(3, "div", 19)(4, "button", 20);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Name")); });
+    i0.ɵɵtext(5, " Workflow ");
+    i0.ɵɵelement(6, "i", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 22);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("StartedAt")); });
+    i0.ɵɵtext(8, " Started ");
+    i0.ɵɵelement(9, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, WorkflowRunsResourceComponent_Conditional_16_Conditional_20_Template, 20, 9, "aside", 24);
+    i0.ɵɵelementStart(10, "button", 22);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("CompletedAt")); });
+    i0.ɵɵtext(11, " Ended ");
+    i0.ɵɵelement(12, "i", 21);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 23);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Duration")); });
+    i0.ɵɵtext(14, " Duration ");
+    i0.ɵɵelement(15, "i", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 24);
+    i0.ɵɵlistener("click", function WorkflowRunsResourceComponent_Conditional_16_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSort("Status")); });
+    i0.ɵɵtext(17, " Status ");
+    i0.ɵɵelement(18, "i", 21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(19, WorkflowRunsResourceComponent_Conditional_16_For_20_Template, 13, 14, "button", 25, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "as-split-area", 26);
+    i0.ɵɵconditionalCreate(22, WorkflowRunsResourceComponent_Conditional_16_Conditional_22_Template, 22, 11, "aside", 27);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_8_0;
+    let tmp_14_0;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("wfr-split-open", ctx_r0.SelectedRun);
+    i0.ɵɵproperty("gutterSize", 8)("disabled", !ctx_r0.SelectedRun);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r0.SelectedRun ? ctx_r0.Layout.SplitSizes[0] : 100)("minSize", 20);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngClass", ctx_r0.SortIcon("Name"));
     i0.ɵɵadvance(3);
@@ -273,8 +857,12 @@ function WorkflowRunsResourceComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.VisibleRuns);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_8_0 = ctx_r0.SelectedRun) ? 20 : -1, tmp_8_0);
+    i0.ɵɵproperty("size", ctx_r0.SelectedRun ? ctx_r0.Layout.SplitSizes[1] : 0)("minSize", 25)("visible", !!ctx_r0.SelectedRun);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = ctx_r0.SelectedRun) ? 22 : -1, tmp_14_0);
 } }
+/** Below this the detail pane cannot hold a canvas AND a JSON pane side by side. */
+const STACK_INNER_BELOW_PX = 1100;
 /**
  * How the JSON panes unpack nested JSON.
  *
@@ -297,6 +885,7 @@ const STATUS_FILTERS = ['all', 'Running', 'Complete', 'Failed', 'Cancelled'];
  * to count them, and the same unit the promotion picker offers.
  */
 let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends BaseDashboard {
+    static { WorkflowRunsResourceComponent_1 = this; }
     cdr;
     IsLoading = false;
     LoadError = null;
@@ -319,6 +908,21 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
     StepsLoading = false;
     /** The step whose JSON is showing, or null when none is selected. */
     SelectedStepID = null;
+    /**
+     * Pane sizes, panel visibility and the legend toggle — the rules live in `workflow-run-layout`,
+     * which is pure and therefore testable without standing up Angular.
+     *
+     * Preferences go through `UserInfoEngine` (`MJ: User Settings`), never `localStorage`: a pane
+     * width that vanishes when someone opens a different browser is exactly the kind of preference
+     * people notice when it disappears. Reads are a synchronous cache hit; writes are debounced,
+     * because dragging a splitter fires continuously.
+     */
+    Layout = new WorkflowRunLayout({
+        Get: (key) => UserInfoEngine.Instance.GetSetting(key),
+        Set: (key, value) => UserInfoEngine.Instance.SetSettingDebounced(key, value),
+    });
+    /** Stacked rather than side-by-side when the detail pane is too narrow for both. */
+    InnerSplitDirection = 'horizontal';
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -327,11 +931,46 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
         return 'Workflow Runs';
     }
     initDashboard() {
-        // Nothing to set up — loadData does the work and the filters default to "everything".
+        this.Layout.Restore();
+        this.applyViewportRules();
     }
     ngAfterViewInit() {
         this.publishAgentContext();
     }
+    /** Re-evaluates the stacking rule; the detail pane's width follows the window's. */
+    onViewportResized() {
+        const before = this.InnerSplitDirection;
+        this.applyViewportRules();
+        if (before !== this.InnerSplitDirection)
+            this.cdr.markForCheck();
+    }
+    applyViewportRules() {
+        // Three columns on a laptop gives each about 400px and the canvas stops being usable, so the
+        // inner pair stacks instead. Mirrors the outer split's existing breakpoint rather than
+        // inventing a second responsive scheme.
+        this.InnerSplitDirection = window.innerWidth < STACK_INNER_BELOW_PX ? 'vertical' : 'horizontal';
+    }
+    OnSplitDragEnd(sizes) {
+        this.Layout.OnSplitDragEnd(sizes);
+    }
+    OnStepSplitDragEnd(sizes) {
+        this.Layout.OnStepSplitDragEnd(sizes);
+    }
+    ToggleStepPanel() {
+        this.Layout.ToggleStepPanel();
+        this.cdr.markForCheck();
+    }
+    /**
+     * The legend was toggled on the canvas toolbar — remember it.
+     *
+     * Driven from the toolbar rather than a button of our own: the canvas already has a legend
+     * control in the place people look for one, and adding a second in the header would be two
+     * controls for one setting, free to disagree.
+     */
+    OnLegendToggled(show) {
+        this.Layout.SetLegendVisible(show);
+        this.cdr.markForCheck();
+    }
     /** The rows after the active filter and search, in the chosen order — what the template renders. */
     get VisibleRuns() {
         const wanted = this.SearchText.trim().toLowerCase();
@@ -437,10 +1076,420 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
         this.SelectedRunID = closing ? null : run.ID;
         this.SelectedStepID = null;
         this.SelectedSteps = [];
+        this.SelectedDeps = [];
+        this.SelectedEdgeID = null;
+        this.InspectorMode = 'step';
+        this.resetEditors();
+        this.detachFrames();
+        this.ReplayPercent = null;
+        this.GraphSettled = false;
+        this.DebugState = EmptyDebugState();
+        this.Invocation = {};
+        // Frames are owned by <mj-task-graph-debugger>; it re-emits them for stall/engine chrome.
         this.publishAgentContext();
         this.cdr.markForCheck();
-        if (!closing)
+        if (!closing) {
             void this.loadSteps(run.ID);
+            void this.loadDebugState(run.ID);
+        }
+    }
+    // ─── live console: frames ────────────────────────────────────────────────
+    //
+    // <mj-task-graph-debugger> owns the frame subscription and re-emits each one. This host only
+    // listens for stall / engine-tick chrome. Frames are ADVISORY; the widget's row reads remain
+    // the truth, reconciled on settlement.
+    /** The newest frame, bound straight into the run view for sub-second canvas updates. */
+    GraphDebug;
+    LatestFrame = null;
+    /** The engine's recent heartbeat ticks (`PassCompleted`), newest last. Bounded. */
+    EngineTicks = [];
+    /** Everything seen this session for the selected run, newest first. Bounded. */
+    FrameLog = [];
+    /** Whether the selected run is paused (from `GraphPaused`/`GraphResumed` frames + verbs). */
+    DebugPaused = false;
+    /** Children are all terminal — the durable bag can still say paused after the last continue. */
+    GraphSettled = false;
+    /** A one-line diagnosis when the engine reports trouble — a lost worker, a held path. */
+    StallNotice = null;
+    /** Structured stall so a held edge can be answered, not just named. */
+    Stall = null;
+    /** Durable debug state from the parent row — frames are advisory, this is the truth. */
+    DebugState = EmptyDebugState();
+    /** Invocation `data`/`context` roots from the same parent bag (R3-3). */
+    Invocation = {};
+    /** Selected path, when the person clicked an edge rather than a step. */
+    SelectedEdgeID = null;
+    InspectorMode = 'step';
+    /** Force-complete confirmation + output editor. */
+    ForceCompleteOpen = false;
+    ForceCompleteJson = '{}';
+    ForceCompleteName = '';
+    ForceCompleteError = null;
+    /** Edit-input editor (Pending → UpdateTaskInput, Failed → RetryTask). */
+    EditInputOpen = false;
+    EditInputJson = '';
+    EditInputError = null;
+    /** True while a control verb round-trips, so the toolbar cannot double-fire. */
+    get ControlBusy() {
+        return this.GraphDebug?.Busy === true;
+    }
+    /** Replay position for a settled run: 0–100 along its wall-clock span, or null for "now". */
+    ReplayPercent = null;
+    /** Dependencies of the selected run's steps, for the what-if preview. */
+    SelectedDeps = [];
+    static FRAME_LOG_LIMIT = 250;
+    static ENGINE_TICK_LIMIT = 10;
+    ngOnDestroy() {
+        this.detachFrames();
+        super.ngOnDestroy();
+    }
+    isLiveStatus(status) {
+        return status === 'In Progress' || status === 'Running' || status === 'Pending';
+    }
+    detachFrames() {
+        this.LatestFrame = null;
+        this.DebugPaused = false;
+        this.StallNotice = null;
+        this.Stall = null;
+    }
+    OnFrame(frame) {
+        this.LatestFrame = frame;
+        this.FrameLog = [frame, ...this.FrameLog].slice(0, WorkflowRunsResourceComponent_1.FRAME_LOG_LIMIT);
+        switch (frame.kind) {
+            case 'PassCompleted':
+                this.EngineTicks = [...this.EngineTicks, frame].slice(-WorkflowRunsResourceComponent_1.ENGINE_TICK_LIMIT);
+                break;
+            case 'GraphPaused':
+            case 'BreakpointHit':
+                if (this.GraphSettled)
+                    break; // bag can still say paused after the last step
+                this.DebugPaused = true;
+                if (this.SelectedRunID)
+                    void this.loadDebugState(this.SelectedRunID);
+                break;
+            case 'GraphResumed':
+                this.DebugPaused = false;
+                if (this.SelectedRunID)
+                    void this.loadDebugState(this.SelectedRunID);
+                break;
+            case 'ClaimChanged':
+                if (frame.claimEvent === 'heartbeat-lost') {
+                    this.setStall({
+                        kind: 'worker-lost',
+                        message: `"${frame.taskName ?? 'A step'}" lost its worker — the engine will requeue it.`,
+                        taskName: frame.taskName,
+                        taskID: frame.taskId,
+                    });
+                }
+                else if (frame.claimEvent === 'reclaimed') {
+                    this.clearStall();
+                }
+                break;
+            case 'GateDecision':
+                if (frame.verdict === 'held') {
+                    this.setStall({
+                        kind: 'held',
+                        message: `"${frame.taskName ?? 'A step'}" is waiting on a path that can't be answered.`,
+                        taskName: frame.taskName,
+                        taskID: frame.taskId,
+                        edgeID: frame.edgeId,
+                        conditionText: frame.conditionText,
+                        reason: frame.reason,
+                    });
+                }
+                break;
+            case 'StepRefused':
+                this.setStall({
+                    kind: 'step-refused',
+                    message: frame.reason ?? 'The step could not start yet; it stays queued.',
+                    reason: frame.reason,
+                });
+                break;
+            case 'GraphSettled':
+                this.markGraphSettled();
+                this.clearStall();
+                void this.loadData(); // the list row's status/duration just changed
+                if (this.SelectedRunID) {
+                    void this.loadSteps(this.SelectedRunID);
+                    void this.loadDebugState(this.SelectedRunID);
+                }
+                break;
+            case 'TaskCompleted':
+            case 'TaskFailed':
+            case 'TaskSkipped':
+            case 'TaskBlocked':
+                // Keep the step list in agreement with the canvas the frame just updated.
+                if (this.SelectedRunID)
+                    void this.loadSteps(this.SelectedRunID);
+                break;
+        }
+        this.cdr.markForCheck();
+    }
+    // ─── live console: control verbs ────────────────────────────────────────
+    //
+    // The drop-in debugger owns RouteOperation. These handlers just call its verbs.
+    async OnPauseRun() {
+        await this.GraphDebug?.Pause();
+        this.DebugPaused = true;
+        this.cdr.markForCheck();
+    }
+    async OnResumeRun() {
+        await this.GraphDebug?.Resume();
+        this.DebugPaused = false;
+        this.cdr.markForCheck();
+    }
+    async OnStepRun(target) {
+        await this.GraphDebug?.Step(target);
+    }
+    async OnCancelRun() {
+        await this.GraphDebug?.Cancel();
+        await this.loadData();
+    }
+    async OnSkipStep(step) {
+        await this.GraphDebug?.SkipTask(step.ID);
+        if (this.SelectedRunID)
+            void this.loadSteps(this.SelectedRunID);
+    }
+    async OnRetryStep(step) {
+        await this.GraphDebug?.RetryTask(step.ID);
+        if (this.SelectedRunID)
+            void this.loadSteps(this.SelectedRunID);
+    }
+    async OnBreakpointToggled(event) {
+        await this.GraphDebug?.ToggleBreakpoint(event.TaskID, event.Enabled);
+    }
+    async OnRemoveBreakpoint(taskID) {
+        await this.OnBreakpointToggled({ TaskID: taskID, Enabled: false });
+    }
+    OnSelectBreakpoint(taskID) {
+        const step = this.SelectedSteps.find((s) => UUIDsEqual(s.ID, taskID));
+        if (step)
+            this.OnSelectStep(step);
+        else {
+            this.SelectedStepID = taskID;
+            this.InspectorMode = 'step';
+            if (!this.Layout.StepPanelOpen)
+                this.ToggleStepPanel();
+            this.cdr.markForCheck();
+        }
+    }
+    async OnOverrideEdge(edgeID, verdict) {
+        await this.GraphDebug?.OverrideEdge(edgeID, verdict);
+        if (verdict != null)
+            this.clearStall();
+    }
+    OnGraphConnectionSelected(event) {
+        if (!event.EdgeID)
+            return;
+        this.SelectedEdgeID = event.EdgeID;
+        this.InspectorMode = 'edge';
+        if (!this.Layout.StepPanelOpen)
+            this.ToggleStepPanel();
+        this.cdr.markForCheck();
+    }
+    get SelectedEdge() {
+        if (!this.SelectedEdgeID)
+            return null;
+        return this.SelectedDeps.find((d) => UUIDsEqual(d.ID, this.SelectedEdgeID)) ?? null;
+    }
+    get SelectedEdgeIsConditional() {
+        return !!this.SelectedEdge?.Condition?.trim();
+    }
+    get SelectedEdgeOverride() {
+        if (!this.SelectedEdgeID)
+            return null;
+        return this.GraphDebug?.GetEdgeOverride(this.SelectedEdgeID) ?? null;
+    }
+    get SelectedEdgeFromName() {
+        const edge = this.SelectedEdge;
+        if (!edge)
+            return '';
+        return this.SelectedSteps.find((s) => UUIDsEqual(s.ID, edge.DependsOnTaskID))?.Name ?? 'upstream';
+    }
+    get SelectedEdgeToName() {
+        const edge = this.SelectedEdge;
+        if (!edge)
+            return '';
+        return this.SelectedSteps.find((s) => UUIDsEqual(s.ID, edge.TaskID))?.Name ?? 'downstream';
+    }
+    StepName(taskID) {
+        return this.SelectedSteps.find((s) => UUIDsEqual(s.ID, taskID))?.Name ?? 'a step';
+    }
+    HasBreakpoint(taskID) {
+        return this.GraphDebug?.HasBreakpoint(taskID) ?? false;
+    }
+    /** Live or paused — the VS Code bar is how you drive it, including a start-paused debug. */
+    CanDriveRun(run) {
+        if (this.IsRunSettled(run))
+            return false;
+        return run.Status === 'In Progress' || run.Status === 'Running' || run.Status === 'Pending' || this.DebugPaused;
+    }
+    IsRunSettled(run) {
+        return this.GraphSettled
+            || run.Status === 'Complete'
+            || run.Status === 'Failed'
+            || run.Status === 'Cancelled';
+    }
+    OnCanvasSettled() {
+        this.markGraphSettled();
+        this.cdr.markForCheck();
+    }
+    markGraphSettled() {
+        this.GraphSettled = true;
+        this.DebugPaused = false;
+        this.DebugState = { ...this.DebugState, paused: false, pausedAtTaskID: null };
+    }
+    StepPayload(step, field) {
+        const value = step.Record[field];
+        if (typeof value === 'string')
+            return value;
+        if (value == null)
+            return null;
+        return JSON.stringify(value);
+    }
+    OnBreakpointCheckbox(step, event) {
+        const target = event.target;
+        const enabled = target instanceof HTMLInputElement && target.checked;
+        void this.OnBreakpointToggled({ TaskID: step.ID, Enabled: enabled });
+    }
+    CanForceComplete(step) {
+        if (this.isHumanStep(step))
+            return false;
+        return step.Status === 'Pending' || step.Status === 'Failed' || step.Status === 'Blocked';
+    }
+    CanEditInput(step) {
+        return step.Status === 'Pending' || step.Status === 'Failed';
+    }
+    OpenForceComplete(step) {
+        this.ForceCompleteOpen = true;
+        this.ForceCompleteJson = this.prettyJson(step.Record['OutputPayload']) || '{}';
+        this.ForceCompleteName = '';
+        this.ForceCompleteError = null;
+        this.EditInputOpen = false;
+        this.cdr.markForCheck();
+    }
+    OpenEditInput(step) {
+        this.EditInputOpen = true;
+        this.EditInputJson = this.prettyJson(step.Record['InputPayload']) || '{}';
+        this.EditInputError = null;
+        this.ForceCompleteOpen = false;
+        this.cdr.markForCheck();
+    }
+    async SubmitForceComplete(step) {
+        if (this.ForceCompleteName.trim() !== step.Name) {
+            this.ForceCompleteError = 'Type the step name exactly to confirm.';
+            this.cdr.markForCheck();
+            return;
+        }
+        const parsed = TryParseJsonObject(this.ForceCompleteJson);
+        if (!parsed.ok) {
+            this.ForceCompleteError = parsed.error;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.ForceCompleteError = null;
+        const ok = await this.GraphDebug?.ForceCompleteTask(step.ID, parsed.value);
+        if (ok) {
+            this.ForceCompleteOpen = false;
+            if (this.SelectedRunID)
+                void this.loadSteps(this.SelectedRunID);
+        }
+    }
+    async SubmitEditInput(step) {
+        const parsed = TryParseJsonObject(this.EditInputJson);
+        if (!parsed.ok) {
+            this.EditInputError = parsed.error;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.EditInputError = null;
+        const ok = step.Status === 'Failed'
+            ? await this.GraphDebug?.RetryTask(step.ID, parsed.value)
+            : await this.GraphDebug?.UpdateTaskInput(step.ID, parsed.value);
+        if (ok) {
+            this.EditInputOpen = false;
+            if (this.SelectedRunID)
+                void this.loadSteps(this.SelectedRunID);
+        }
+    }
+    get InvocationJson() {
+        return JSON.stringify(ParseJSONRecursive({ data: this.Invocation.data ?? null, context: this.Invocation.context ?? null }, JSON_PARSE_OPTIONS), null, 2);
+    }
+    get HasInvocation() {
+        return this.Invocation.data != null || this.Invocation.context != null;
+    }
+    // ─── live console: inspector data ───────────────────────────────────────
+    /** The newest claim event seen for the selected step, if any. */
+    get SelectedStepClaim() {
+        if (!this.SelectedStepID)
+            return null;
+        return this.FrameLog.find((f) => f.kind === 'ClaimChanged' && UUIDsEqual(f.taskId ?? '', this.SelectedStepID)) ?? null;
+    }
+    /** Latest verdict per path into/out of the selected step — "why did this branch run". */
+    get SelectedStepVerdicts() {
+        if (!this.SelectedStepID)
+            return [];
+        const byEdge = new Map();
+        // FrameLog is newest-first, so the first sighting per edge is the latest verdict.
+        for (const f of this.FrameLog) {
+            if (f.kind !== 'GateDecision' || !f.edgeId)
+                continue;
+            const touches = UUIDsEqual(f.taskId ?? '', this.SelectedStepID) || UUIDsEqual(f.dependsOnTaskId ?? '', this.SelectedStepID);
+            if (touches && !byEdge.has(f.edgeId))
+                byEdge.set(f.edgeId, f);
+        }
+        return [...byEdge.values()];
+    }
+    /** What the selected step's runner last said it was doing. */
+    get SelectedStepProgress() {
+        if (!this.SelectedStepID)
+            return null;
+        return this.FrameLog.find((f) => f.kind === 'NodeProgress' && UUIDsEqual(f.taskId ?? '', this.SelectedStepID)) ?? null;
+    }
+    /**
+     * What-if: how many steps would be cut off if the selected step failed — computed with the
+     * engine's OWN blocking algorithm over the loaded rows, so the preview cannot disagree with
+     * what the dispatcher would actually do.
+     */
+    get SelectedStepWhatIf() {
+        const step = this.SelectedStep;
+        if (!step || this.SelectedSteps.length === 0)
+            return null;
+        const nodes = this.SelectedSteps.map((s) => ({
+            id: s.ID,
+            status: (UUIDsEqual(s.ID, step.ID) ? 'Failed' : s.Status),
+        }));
+        const edges = this.SelectedDeps.map((d) => ({
+            taskId: d.TaskID,
+            dependsOnTaskId: d.DependsOnTaskID,
+            dependencyType: d.DependencyType,
+        }));
+        const blocked = ComputeTasksToBlock(nodes, edges, new Set());
+        return { BlockedCount: [...blocked].filter((id) => !UUIDsEqual(id, step.ID)).length };
+    }
+    // ─── live console: replay ───────────────────────────────────────────────
+    /** Whether the selected run can be scrubbed — it has settled and has a wall-clock span. */
+    get CanReplay() {
+        const run = this.SelectedRun;
+        return !!run && !this.isLiveStatus(run.Status) && !!run.StartedAt && !!run.CompletedAt;
+    }
+    /** The scrub position as a timestamp inside the run's span, or null when showing the present. */
+    get ReplayAt() {
+        const run = this.SelectedRun;
+        if (this.ReplayPercent == null || !run?.StartedAt || !run?.CompletedAt)
+            return null;
+        const start = run.StartedAt.getTime();
+        const end = run.CompletedAt.getTime();
+        return new Date(start + (end - start) * (this.ReplayPercent / 100));
+    }
+    OnReplayScrub(value) {
+        const pct = Math.max(0, Math.min(100, Number(value)));
+        this.ReplayPercent = Number.isFinite(pct) ? pct : null;
+        this.cdr.markForCheck();
+    }
+    OnReplayReset() {
+        this.ReplayPercent = null;
+        this.cdr.markForCheck();
     }
     /**
      * Loads the selected run's steps.
@@ -464,8 +1513,16 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
                 ResultType: 'entity_object',
                 BypassCache: true,
             });
+            // The edges too, for the what-if preview — same rows the run view reads for the canvas.
+            const deps = await RunView.FromMetadataProvider(this.ProviderToUse).RunView({
+                EntityName: 'MJ: Task Dependencies',
+                ExtraFilter: `TaskID IN (SELECT ID FROM __mj.Task WHERE ParentID='${parentTaskID}')`,
+                ResultType: 'entity_object',
+                BypassCache: true,
+            });
             if (!UUIDsEqual(this.SelectedRunID ?? '', parentTaskID))
                 return; // selection moved on
+            this.SelectedDeps = (deps.Success ? (deps.Results ?? []) : []);
             this.SelectedSteps = (result.Success ? (result.Results ?? []) : []).map((t) => ({
                 ID: t.ID,
                 Name: t.Name ?? '(unnamed step)',
@@ -488,10 +1545,17 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
     /** A node was clicked on the canvas — show that step's JSON. */
     OnGraphNodeSelected(event) {
         this.SelectedStepID = event.TaskID;
+        this.InspectorMode = 'step';
+        // Asking to see a step is asking for the panel. Leaving it closed would make the click look
+        // like it did nothing.
+        if (!this.Layout.StepPanelOpen)
+            this.ToggleStepPanel();
         this.cdr.markForCheck();
     }
     OnSelectStep(step) {
         this.SelectedStepID = UUIDsEqual(this.SelectedStepID ?? '', step.ID) ? null : step.ID;
+        this.InspectorMode = 'step';
+        this.resetEditors();
         this.cdr.markForCheck();
     }
     OnDetailTab(tab) {
@@ -546,6 +1610,75 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
             return;
         this.navigationService.OpenEntityRecord('MJ: AI Agent Runs', CompositeKey.FromID(run.AgentRunID));
     }
+    async loadDebugState(parentTaskID) {
+        try {
+            const result = await RunView.FromMetadataProvider(this.ProviderToUse).RunView({
+                EntityName: 'MJ: Tasks',
+                ExtraFilter: `ID='${parentTaskID}'`,
+                ResultType: 'entity_object',
+                BypassCache: true,
+            });
+            if (!UUIDsEqual(this.SelectedRunID ?? '', parentTaskID))
+                return;
+            const parent = result.Success ? result.Results?.[0] : undefined;
+            const bag = ParseWorkflowRunParentBag(parent?.InputPayload);
+            this.Invocation = bag.invocation;
+            // Settled trumps the durable bag: $.debug.paused can still be true after the last
+            // continue, and painting that as "paused here" hides that the run is over.
+            if (this.GraphSettled) {
+                this.DebugState = { ...bag.debug, paused: false, pausedAtTaskID: null };
+                this.DebugPaused = false;
+            }
+            else {
+                this.DebugState = bag.debug;
+                this.DebugPaused = bag.debug.paused;
+            }
+        }
+        catch {
+            // A failed parent read leaves the last known debug state; frames remain the safety net.
+        }
+        this.cdr.markForCheck();
+    }
+    setStall(stall) {
+        this.Stall = stall;
+        this.StallNotice = stall.message;
+    }
+    clearStall() {
+        this.Stall = null;
+        this.StallNotice = null;
+    }
+    OnDismissStall() {
+        this.clearStall();
+        this.cdr.markForCheck();
+    }
+    resetEditors() {
+        this.ForceCompleteOpen = false;
+        this.ForceCompleteError = null;
+        this.EditInputOpen = false;
+        this.EditInputError = null;
+    }
+    isHumanStep(step) {
+        const userID = step.Record['UserID'];
+        return typeof userID === 'string' && userID.trim().length > 0;
+    }
+    prettyJson(value) {
+        if (value == null || value === '')
+            return '';
+        if (typeof value === 'string') {
+            try {
+                return JSON.stringify(JSON.parse(value), null, 2);
+            }
+            catch {
+                return value;
+            }
+        }
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return '';
+        }
+    }
     /**
      * Reports surface state and registers what an agent may drive here.
      *
@@ -635,21 +1768,28 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
         ]);
     }
     static ɵfac = function WorkflowRunsResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WorkflowRunsResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WorkflowRunsResourceComponent, selectors: [["mj-workflow-runs"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 4, consts: [["Title", "Runs", "Icon", "fa-solid fa-timeline", "Subtitle", "Every workflow that has run \u2014 however it was started."], ["meta", ""], ["Label", "runs", 3, "Count", "Total"], ["actions", ""], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search runs", 3, "ValueChange", "Value"], [1, "wfr-status-filters"], ["type", "button", "mjButton", "", "size", "sm", 3, "variant"], ["text", "Loading runs..."], ["Variant", "error", 3, "Message"], ["Icon", "fa-solid fa-timeline", "Title", "Nothing has run yet", "Message", "When a workflow runs \u2014 started by hand, on a schedule, or by an agent \u2014 it will appear here."], ["Icon", "fa-solid fa-filter", "Title", "No runs match", "Message", "Nothing matches the current filter. Clear it to see everything that has run."], [1, "wfr-split", 3, "wfr-split-open"], ["type", "button", "mjButton", "", "size", "sm", 3, "click", "variant"], [1, "wfr-split"], [1, "wfr-list"], ["role", "row", 1, "wfr-head"], ["type", "button", 1, "wfr-head-cell", "wfr-col-name", 3, "click"], ["aria-hidden", "true", 3, "ngClass"], ["type", "button", 1, "wfr-head-cell", "wfr-col-time", 3, "click"], ["type", "button", 1, "wfr-head-cell", "wfr-col-duration", 3, "click"], ["type", "button", 1, "wfr-head-cell", "wfr-col-status", 3, "click"], ["type", "button", 1, "wfr-row", 3, "wfr-row-selected"], [1, "wfr-detail"], ["type", "button", 1, "wfr-row", 3, "click"], [1, "wfr-col-name", "wfr-row-name"], [1, "wfr-col-time"], [1, "wfr-col-duration"], [1, "wfr-col-status", "wfr-row-status"], [1, "wfr-detail-head"], [1, "wfr-detail-title"], [1, "wfr-detail-name"], [1, "wfr-row-status"], [1, "wfr-detail-actions"], ["mjButton", "", "variant", "flat", "size", "sm"], ["mjButton", "", "variant", "flat", "size", "sm", "aria-label", "Close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["role", "tablist", 1, "wfr-detail-tabs"], ["type", "button", 1, "wfr-tab", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project"], ["aria-hidden", "true", 1, "fa-solid", "fa-code"], [1, "wfr-json-pane"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "wfr-graph-pane"], ["Height", "100%", 3, "NodeSelected", "Provider", "ParentTaskID", "WorkflowName", "LiveUpdates"], [1, "wfr-steps-pane"], ["text", "Loading steps..."], [1, "wfr-step-list"], ["type", "button", 1, "wfr-step", 3, "wfr-step-selected"], [1, "wfr-step-json"], ["Size", "compact", "Icon", "fa-solid fa-hand-pointer", "Title", "Select a step", "Message", "Click a step on the canvas or in the list to see everything it recorded."], ["type", "button", 1, "wfr-step", 3, "click"], [1, "wfr-step-name"], [1, "wfr-step-meta"], [1, "wfr-step-json-head"], [2, "width", "100%", 3, "ngModel", "language", "readonly"]], template: function WorkflowRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
-            i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_3_Template, 1, 2, "mj-stat-badge", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WorkflowRunsResourceComponent, selectors: [["mj-workflow-runs"]], viewQuery: function WorkflowRunsResourceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(TaskGraphDebuggerComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.GraphDebug = _t.first);
+        } }, hostBindings: function WorkflowRunsResourceComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function WorkflowRunsResourceComponent_resize_HostBindingHandler() { return ctx.onViewportResized(); }, i0.ɵɵresolveWindow);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 4, consts: [["GraphDebug", ""], ["Title", "Runs", "Icon", "fa-solid fa-timeline", "Subtitle", "Every workflow that has run \u2014 however it was started."], ["meta", ""], ["Label", "runs", 3, "Count", "Total"], ["actions", ""], [3, "Clicked", "Loading"], ["toolbar", ""], ["Placeholder", "Search runs", 3, "ValueChange", "Value"], [1, "wfr-status-filters"], ["type", "button", "mjButton", "", "size", "sm", 3, "variant"], ["text", "Loading runs..."], ["Variant", "error", 3, "Message"], ["Icon", "fa-solid fa-timeline", "Title", "Nothing has run yet", "Message", "When a workflow runs \u2014 started by hand, on a schedule, or by an agent \u2014 it will appear here."], ["Icon", "fa-solid fa-filter", "Title", "No runs match", "Message", "Nothing matches the current filter. Clear it to see everything that has run."], ["direction", "horizontal", "unit", "percent", 1, "wfr-split", 3, "gutterSize", "disabled"], ["type", "button", "mjButton", "", "size", "sm", 3, "click", "variant"], ["direction", "horizontal", "unit", "percent", 1, "wfr-split", 3, "dragEnd", "gutterSize", "disabled"], [3, "size", "minSize"], [1, "wfr-list"], ["role", "row", 1, "wfr-head"], ["type", "button", 1, "wfr-head-cell", "wfr-col-name", 3, "click"], ["aria-hidden", "true", 3, "ngClass"], ["type", "button", 1, "wfr-head-cell", "wfr-col-time", 3, "click"], ["type", "button", 1, "wfr-head-cell", "wfr-col-duration", 3, "click"], ["type", "button", 1, "wfr-head-cell", "wfr-col-status", 3, "click"], ["type", "button", 1, "wfr-row", 3, "wfr-row-selected"], [3, "size", "minSize", "visible"], [1, "wfr-detail"], ["type", "button", 1, "wfr-row", 3, "click"], [1, "wfr-col-name", "wfr-row-name"], [1, "wfr-col-time"], [1, "wfr-col-duration"], [1, "wfr-col-status", "wfr-row-status"], [1, "wfr-detail-head"], [1, "wfr-detail-title"], [1, "wfr-detail-name"], [1, "wfr-row-status"], [1, "wfr-detail-actions"], ["mjButton", "", "variant", "flat", "size", "sm"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "aria-label", "Close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["role", "tablist", 1, "wfr-detail-tabs"], ["type", "button", 1, "wfr-tab", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project"], ["aria-hidden", "true", 1, "fa-solid", "fa-code"], ["role", "status", 1, "wfr-stall"], ["unit", "percent", 1, "wfr-graph-split", 3, "direction", "gutterSize"], [1, "wfr-json-pane"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], [1, "wfr-stall-body"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], [1, "wfr-stall-copy"], [1, "wfr-stall-reason"], [1, "wfr-stall-actions"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "disabled"], ["unit", "percent", 1, "wfr-graph-split", 3, "dragEnd", "direction", "gutterSize"], [1, "wfr-graph-pane"], ["Height", "100%", 3, "NodeSelected", "ConnectionSelected", "LegendToggled", "Settled", "Frame", "PausedChange", "Provider", "ParentTaskID", "WorkflowName", "LiveUpdates", "ReplayAt", "ShowLegend"], [1, "wfr-replay"], ["aria-label", "Armed breakpoints", 1, "wfr-bp-bar"], ["aria-label", "Engine activity", 1, "wfr-engine"], [1, "wfr-steps-pane"], ["text", "Loading steps..."], ["aria-hidden", "true", 1, "fa-solid", "fa-clock-rotate-left"], ["type", "range", "min", "0", "max", "100", "step", "1", "aria-label", "Replay position", 3, "input", "value"], [1, "wfr-chip", "wfr-chip-paused"], ["type", "button", 1, "wfr-chip", "wfr-chip-break"], ["aria-hidden", "true", 1, "fa-solid", "fa-pause"], ["type", "button", 1, "wfr-chip", "wfr-chip-break", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle"], ["role", "button", "tabindex", "0", "aria-label", "Remove breakpoint", 1, "wfr-chip-x", 3, "click"], [1, "wfr-tick", 3, "wfr-tick-held"], [1, "wfr-tick", "wfr-tick-paused"], [1, "wfr-tick"], [1, "wfr-step-list"], ["type", "button", 1, "wfr-step", 3, "wfr-step-selected"], [1, "wfr-step-json"], ["Size", "compact", "Icon", "fa-solid fa-hand-pointer", "Title", "Select a step", "Message", "Click a step on the canvas or in the list to see everything it recorded."], ["type", "button", 1, "wfr-step", 3, "click"], [1, "wfr-step-name"], [1, "wfr-step-meta"], [1, "wfr-step-json-head"], [1, "wfr-chip", "wfr-chip-forced"], [1, "wfr-insp-card"], [1, "wfr-insp-label"], [1, "wfr-insp-actions"], [1, "wfr-insp-hint"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "disabled"], ["type", "button", 1, "wfr-bp", 3, "click", "disabled", "title"], ["aria-hidden", "true", 1, "fa-circle"], [1, "wfr-insp-card", 3, "wfr-insp-bad"], [1, "wfr-editor-card"], [1, "wfr-editor-card", "wfr-editor-danger"], [3, "InputPayload", "OutputPayload", "Invocation"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Declare this step not-taken; later steps proceed", 3, "disabled"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "disabled"], ["mjButton", "", "variant", "danger", "size", "sm", 3, "disabled"], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Declare this step not-taken; later steps proceed", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-forward"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen-to-square"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-right"], ["mjButton", "", "variant", "danger", "size", "sm", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-flag-checkered"], ["rows", "8", "spellcheck", "false", 1, "mj-textarea", "wfr-json-edit", 3, "ngModelChange", "ngModel"], [1, "wfr-editor-error"], ["rows", "6", "spellcheck", "false", 1, "mj-textarea", "wfr-json-edit", 3, "ngModelChange", "ngModel"], ["type", "text", 1, "mj-input", 3, "ngModelChange", "ngModel", "placeholder"], [2, "width", "100%", 3, "ngModel", "language", "readonly"]], template: function WorkflowRunsResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 1)(2, "div", 2);
+            i0.ɵɵconditionalCreate(3, WorkflowRunsResourceComponent_Conditional_3_Template, 1, 2, "mj-stat-badge", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3)(5, "mj-refresh-button", 4);
+            i0.ɵɵelementStart(4, "div", 4)(5, "mj-refresh-button", 5);
             i0.ɵɵlistener("Clicked", function WorkflowRunsResourceComponent_Template_mj_refresh_button_Clicked_5_listener() { return ctx.loadData(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 5)(7, "mj-page-search", 6);
+            i0.ɵɵelementStart(6, "div", 6)(7, "mj-page-search", 7);
             i0.ɵɵlistener("ValueChange", function WorkflowRunsResourceComponent_Template_mj_page_search_ValueChange_7_listener($event) { return ctx.OnSearch($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 7);
-            i0.ɵɵrepeaterCreate(9, WorkflowRunsResourceComponent_For_10_Template, 2, 2, "button", 8, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(8, "div", 8);
+            i0.ɵɵrepeaterCreate(9, WorkflowRunsResourceComponent_For_10_Template, 2, 2, "button", 9, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(11, "mj-page-body");
-            i0.ɵɵconditionalCreate(12, WorkflowRunsResourceComponent_Conditional_12_Template, 1, 0, "mj-loading", 9)(13, WorkflowRunsResourceComponent_Conditional_13_Template, 1, 1, "mj-alert", 10)(14, WorkflowRunsResourceComponent_Conditional_14_Template, 1, 0, "mj-empty-state", 11)(15, WorkflowRunsResourceComponent_Conditional_15_Template, 1, 0, "mj-empty-state", 12)(16, WorkflowRunsResourceComponent_Conditional_16_Template, 21, 8, "div", 13);
+            i0.ɵɵconditionalCreate(12, WorkflowRunsResourceComponent_Conditional_12_Template, 1, 0, "mj-loading", 10)(13, WorkflowRunsResourceComponent_Conditional_13_Template, 1, 1, "mj-alert", 11)(14, WorkflowRunsResourceComponent_Conditional_14_Template, 1, 0, "mj-empty-state", 12)(15, WorkflowRunsResourceComponent_Conditional_15_Template, 1, 0, "mj-empty-state", 13)(16, WorkflowRunsResourceComponent_Conditional_16_Template, 23, 13, "as-split", 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -662,15 +1802,21 @@ let WorkflowRunsResourceComponent = class WorkflowRunsResourceComponent extends
             i0.ɵɵrepeater(ctx.StatusFilters);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.IsLoading ? 12 : ctx.LoadError ? 13 : ctx.Runs.length === 0 ? 14 : ctx.VisibleRuns.length === 0 ? 15 : 16);
-        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.MJAlertComponent, i3.MJButtonDirective, i3.MJEmptyStateComponent, i3.MJPageBodyComponent, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageSearchComponent, i3.MJRefreshButtonComponent, i3.MJStatBadgeComponent, i4.LoadingComponent, i5.TaskGraphRunViewComponent, i6.CodeEditorComponent, i1.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.wfr-status-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n\n\n\n.wfr-split[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--mj-space-3);\n  height: 100%;\n  min-height: 0;\n}\n\n.wfr-split-open[_ngcontent-%COMP%] {\n  grid-template-columns: minmax(28rem, 40%) 1fr;\n}\n\n@media (max-width: 900px) {\n  .wfr-split-open[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.wfr-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.wfr-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  width: 100%;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  text-align: left;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n}\n\n.wfr-row[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-row[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.wfr-row-selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.wfr-row-main[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.wfr-row-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-row-when[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.wfr-row-status[_ngcontent-%COMP%] {\n  flex: none;\n  font-size: var(--mj-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n\n\n\n\n.wfr-row-status[data-status='Complete'][_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Failed'][_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Running'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.wfr-detail[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.wfr-detail-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-detail-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.wfr-detail-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: none;\n}\n\n\n\n\n\n\n\n\n.wfr-head[_ngcontent-%COMP%], \n.wfr-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.9fr);\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n\n.wfr-head[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0 var(--mj-space-3) var(--mj-space-1);\n  background: var(--mj-bg-page);\n}\n\n.wfr-head-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: var(--mj-space-1) 0;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-head-cell[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.wfr-head-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  opacity: 0.65;\n  font-size: 0.85em;\n}\n\n.wfr-col-time[_ngcontent-%COMP%], \n.wfr-col-duration[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wfr-col-status[_ngcontent-%COMP%] {\n  justify-self: start;\n}\n\n\n\n\n\n.wfr-detail-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-1);\n  padding: 0 var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-tab[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: var(--mj-space-2) var(--mj-space-2);\n  font-size: var(--mj-font-size-sm);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.wfr-tab-active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n\n\n.wfr-graph-pane[_ngcontent-%COMP%] {\n  flex: 1 1 55%;\n  min-height: 12rem;\n}\n\n.wfr-steps-pane[_ngcontent-%COMP%] {\n  flex: 1 1 45%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  border-top: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.wfr-step-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 30%;\n  overflow-y: auto;\n}\n\n.wfr-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-2);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-step[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-step-selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.wfr-step[data-status='Skipped'][_ngcontent-%COMP%]   .wfr-step-name[_ngcontent-%COMP%] {\n  text-decoration: line-through;\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.wfr-step-meta[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-json[_ngcontent-%COMP%], \n.wfr-json-pane[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.wfr-step-json-head[_ngcontent-%COMP%] {\n  padding: var(--mj-space-1) var(--mj-space-3);\n  font-weight: 600;\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJAlertComponent, i3.MJButtonDirective, i3.MJEmptyStateComponent, i3.MJPageBodyComponent, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageSearchComponent, i3.MJRefreshButtonComponent, i3.MJStatBadgeComponent, i4.LoadingComponent, i5.TaskGraphVariablesComponent, i5.TaskGraphDebuggerComponent, i6.CodeEditorComponent, i7.SplitComponent, i7.SplitAreaComponent, i1.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.wfr-status-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n\n\n\n.wfr-split[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n}\n\n\n\n[_nghost-%COMP%]     .wfr-split > .as-split-gutter, \n[_nghost-%COMP%]     .wfr-graph-split > .as-split-gutter {\n  background: transparent !important;\n  position: relative;\n}\n\n[_nghost-%COMP%]     .wfr-split > .as-split-gutter::after, \n[_nghost-%COMP%]     .wfr-graph-split > .as-split-gutter::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n}\n\n[_nghost-%COMP%]     .wfr-split.as-horizontal > .as-split-gutter::after, \n[_nghost-%COMP%]     .wfr-graph-split.as-horizontal > .as-split-gutter::after {\n  width: 2px;\n}\n\n[_nghost-%COMP%]     .wfr-graph-split.as-vertical > .as-split-gutter::after {\n  height: 2px;\n}\n\n[_nghost-%COMP%]     .wfr-split > .as-split-gutter:hover::after, \n[_nghost-%COMP%]     .wfr-graph-split > .as-split-gutter:hover::after {\n  background: var(--mj-brand-primary);\n}\n\n\n\n\n\n.wfr-graph-split[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.wfr-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.wfr-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  width: 100%;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  text-align: left;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n}\n\n.wfr-row[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-row[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.wfr-row-selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.wfr-row-main[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.wfr-row-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-row-when[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.wfr-row-status[_ngcontent-%COMP%] {\n  flex: none;\n  font-size: var(--mj-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n\n\n\n\n.wfr-row-status[data-status='Complete'][_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Failed'][_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Running'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.wfr-detail[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  \n\n\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.wfr-detail-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-detail-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.wfr-detail-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: none;\n}\n\n\n\n\n\n\n\n\n.wfr-head[_ngcontent-%COMP%], \n.wfr-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.9fr);\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n\n.wfr-head[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0 var(--mj-space-3) var(--mj-space-1);\n  background: var(--mj-bg-page);\n}\n\n.wfr-head-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: var(--mj-space-1) 0;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-head-cell[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.wfr-head-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  opacity: 0.65;\n  font-size: 0.85em;\n}\n\n.wfr-col-time[_ngcontent-%COMP%], \n.wfr-col-duration[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wfr-col-status[_ngcontent-%COMP%] {\n  justify-self: start;\n}\n\n\n\n\n\n.wfr-detail-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-1);\n  padding: 0 var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-tab[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: var(--mj-space-2) var(--mj-space-2);\n  font-size: var(--mj-font-size-sm);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.wfr-tab-active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.wfr-graph-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 12rem;\n}\n\n.wfr-steps-pane[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  border-left: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n\n\n[_nghost-%COMP%]     .as-vertical .wfr-steps-pane {\n  border-left: none;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.wfr-step-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 8rem;\n  overflow-y: auto;\n  flex: none;\n}\n\n.wfr-step[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-2);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-step[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-step-selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.wfr-step[data-status='Skipped'][_ngcontent-%COMP%]   .wfr-step-name[_ngcontent-%COMP%] {\n  text-decoration: line-through;\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.wfr-step-meta[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-json[_ngcontent-%COMP%], \n.wfr-json-pane[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.wfr-step-json-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-3);\n  font-weight: 600;\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  flex: none;\n}\n\n\n\n\n.wfr-stall[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 8px 12px;\n  margin: 0 12px 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, var(--mj-border-default));\n  border-left: 4px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n}\n.wfr-stall-body[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n.wfr-stall[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.wfr-stall-copy[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.wfr-stall-copy[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n}\n.wfr-stall-reason[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.wfr-stall-actions[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 6px; }\n\n.wfr-replay[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n.wfr-replay[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.wfr-replay[_ngcontent-%COMP%]   input[type='range'][_ngcontent-%COMP%] { flex: 1; accent-color: var(--mj-brand-primary); }\n\n.wfr-engine[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n.wfr-tick[_ngcontent-%COMP%] {\n  flex: none;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  white-space: nowrap;\n}\n.wfr-tick-held[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-warning, #d97706) 45%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-status-warning, #d97706) 8%, var(--mj-bg-surface));\n}\n.wfr-tick-paused[_ngcontent-%COMP%] { color: var(--mj-brand-primary); border-color: var(--mj-border-strong); }\n\n.wfr-insp-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 7px 10px;\n  margin: 0 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-primary);\n}\n.wfr-insp-card[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n}\n.wfr-insp-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n}\n.wfr-insp-card[data-verdict='held'][_ngcontent-%COMP%], \n.wfr-insp-bad[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-warning, #d97706) 45%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-status-warning, #d97706) 8%, var(--mj-bg-surface));\n}\n.wfr-insp-card[data-verdict='satisfied'][_ngcontent-%COMP%]   .wfr-insp-label[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.wfr-insp-actions[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }\n.wfr-insp-hint[_ngcontent-%COMP%] {\n  margin: 0 0 8px;\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n\n.wfr-bp-bar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n.wfr-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-xs);\n  cursor: pointer;\n}\n.wfr-chip-break[_ngcontent-%COMP%] { color: var(--mj-status-error); border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent); }\n.wfr-chip-break[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 7px; }\n.wfr-chip-paused[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  cursor: default;\n}\n.wfr-chip-forced[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  cursor: default;\n}\n.wfr-chip-x[_ngcontent-%COMP%] {\n  font-size: 14px;\n  line-height: 1;\n  padding: 0 2px;\n}\n.wfr-chip-x[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.wfr-bp[_ngcontent-%COMP%] {\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 0 8px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.wfr-bp[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.wfr-bp-on[_ngcontent-%COMP%], \n.wfr-bp-on[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.wfr-bp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.wfr-bp[_ngcontent-%COMP%]:disabled { opacity: 0.45; cursor: default; }\n\n.wfr-editor-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  margin: 0 0 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n}\n.wfr-editor-danger[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n.wfr-json-edit[_ngcontent-%COMP%] {\n  width: 100%;\n  min-height: 120px;\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n  resize: vertical;\n}\n.wfr-editor-error[_ngcontent-%COMP%] { color: var(--mj-status-error); font-size: var(--mj-font-size-xs); }"], changeDetection: 0 });
 };
-WorkflowRunsResourceComponent = __decorate([
+WorkflowRunsResourceComponent = WorkflowRunsResourceComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'WorkflowRunsResource')
 ], WorkflowRunsResourceComponent);
 export { WorkflowRunsResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkflowRunsResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-workflow-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Runs\"\n    Icon=\"fa-solid fa-timeline\"\n    Subtitle=\"Every workflow that has run \u2014 however it was started.\">\n\n    <div meta>\n      @if (!IsLoading && Runs.length > 0) {\n        <mj-stat-badge\n          [Count]=\"VisibleRuns.length\"\n          [Total]=\"Runs.length\"\n          Label=\"runs\"></mj-stat-badge>\n      }\n    </div>\n\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"loadData()\"></mj-refresh-button>\n    </div>\n\n    <div toolbar>\n      <mj-page-search\n        [Value]=\"SearchText\"\n        Placeholder=\"Search runs\"\n        (ValueChange)=\"OnSearch($event)\"></mj-page-search>\n\n      <div class=\"wfr-status-filters\">\n        @for (status of StatusFilters; track status) {\n          <button\n            type=\"button\"\n            mjButton\n            [variant]=\"StatusFilter === status ? 'primary' : 'flat'\"\n            size=\"sm\"\n            (click)=\"OnFilterByStatus(status)\">\n            {{ status === 'all' ? 'All' : status }}\n          </button>\n        }\n      </div>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (IsLoading) {\n      <mj-loading text=\"Loading runs...\"></mj-loading>\n    } @else if (LoadError) {\n      <mj-alert Variant=\"error\" [Message]=\"LoadError\"></mj-alert>\n    } @else if (Runs.length === 0) {\n      <mj-empty-state\n        Icon=\"fa-solid fa-timeline\"\n        Title=\"Nothing has run yet\"\n        Message=\"When a workflow runs \u2014 started by hand, on a schedule, or by an agent \u2014 it will appear here.\">\n      </mj-empty-state>\n    } @else if (VisibleRuns.length === 0) {\n      <mj-empty-state\n        Icon=\"fa-solid fa-filter\"\n        Title=\"No runs match\"\n        Message=\"Nothing matches the current filter. Clear it to see everything that has run.\">\n      </mj-empty-state>\n    } @else {\n      <div class=\"wfr-split\" [class.wfr-split-open]=\"SelectedRun\">\n        <div class=\"wfr-list\">\n          <!-- A header row that sorts. Every column a person scans by is sortable, because \"the\n               longest run\" and \"the one that failed this morning\" are the two questions this list\n               exists to answer and neither is answerable by scrolling. -->\n          <div class=\"wfr-head\" role=\"row\">\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-name\" (click)=\"OnSort('Name')\">\n              Workflow <i [ngClass]=\"SortIcon('Name')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-time\" (click)=\"OnSort('StartedAt')\">\n              Started <i [ngClass]=\"SortIcon('StartedAt')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-time\" (click)=\"OnSort('CompletedAt')\">\n              Ended <i [ngClass]=\"SortIcon('CompletedAt')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-duration\" (click)=\"OnSort('Duration')\">\n              Duration <i [ngClass]=\"SortIcon('Duration')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-status\" (click)=\"OnSort('Status')\">\n              Status <i [ngClass]=\"SortIcon('Status')\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @for (run of VisibleRuns; track run.ID) {\n            <button\n              type=\"button\"\n              class=\"wfr-row\"\n              [class.wfr-row-selected]=\"run.ID === SelectedRunID\"\n              (click)=\"OnSelectRun(run)\">\n              <span class=\"wfr-col-name wfr-row-name\">{{ run.Name }}</span>\n              <!-- An em dash, never a fabricated time: a run that has not started has no start, and\n                   printing one would read as data. -->\n              <span class=\"wfr-col-time\">{{ run.StartedAt ? (run.StartedAt | date:'MMM d, h:mm:ss a') : '\u2014' }}</span>\n              <span class=\"wfr-col-time\">{{ run.CompletedAt ? (run.CompletedAt | date:'MMM d, h:mm:ss a') : '\u2014' }}</span>\n              <span class=\"wfr-col-duration\">{{ run.Duration }}</span>\n              <span class=\"wfr-col-status wfr-row-status\" [attr.data-status]=\"run.Status\">{{ run.Status }}</span>\n            </button>\n          }\n        </div>\n\n        @if (SelectedRun; as selected) {\n          <!-- The canvas lives in the RIGHT PANEL on selection, not nested inside the list row.\n               A graph needs room to be read; inlining one per row turns a scannable list into a\n               stack of diagrams. -->\n          <aside class=\"wfr-detail\">\n            <header class=\"wfr-detail-head\">\n              <div class=\"wfr-detail-title\">\n                <span class=\"wfr-detail-name\">{{ selected.Name }}</span>\n                <span class=\"wfr-row-status\" [attr.data-status]=\"selected.Status\">{{ selected.Status }}</span>\n              </div>\n              <div class=\"wfr-detail-actions\">\n                @if (selected.AgentRunID) {\n                  <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnOpenAgentRun(selected)\">\n                    <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n                    Agent run\n                  </button>\n                }\n                <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnSelectRun(selected)\" aria-label=\"Close\">\n                  <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </header>\n\n            <div class=\"wfr-detail-tabs\" role=\"tablist\">\n              <button type=\"button\" class=\"wfr-tab\" [class.wfr-tab-active]=\"DetailTab === 'graph'\"\n                      (click)=\"OnDetailTab('graph')\">\n                <i class=\"fa-solid fa-diagram-project\" aria-hidden=\"true\"></i> Workflow\n              </button>\n              <button type=\"button\" class=\"wfr-tab\" [class.wfr-tab-active]=\"DetailTab === 'json'\"\n                      (click)=\"OnDetailTab('json')\">\n                <i class=\"fa-solid fa-code\" aria-hidden=\"true\"></i> JSON\n              </button>\n            </div>\n\n            @if (DetailTab === 'graph') {\n              <!-- The canvas, then whatever step is selected on it. Clicking a node shows that\n                   step's record \u2014 the same move the agent-run timeline offers, so a workflow reads\n                   the same way wherever it is opened from. -->\n              <div class=\"wfr-graph-pane\">\n                <mj-task-graph-run-view\n                  [Provider]=\"ProviderToUse\"\n                  [ParentTaskID]=\"selected.ID\"\n                  [WorkflowName]=\"selected.Name\"\n                  [LiveUpdates]=\"selected.Status === 'Running' || selected.Status === 'In Progress'\"\n                  Height=\"100%\"\n                  (NodeSelected)=\"OnGraphNodeSelected($event)\">\n                </mj-task-graph-run-view>\n              </div>\n\n              <div class=\"wfr-steps-pane\">\n                @if (StepsLoading) {\n                  <mj-loading text=\"Loading steps...\"></mj-loading>\n                } @else {\n                  <div class=\"wfr-step-list\">\n                    @for (step of SelectedSteps; track step.ID) {\n                      <button type=\"button\" class=\"wfr-step\"\n                              [class.wfr-step-selected]=\"step.ID === SelectedStepID\"\n                              [attr.data-status]=\"step.Status\"\n                              (click)=\"OnSelectStep(step)\">\n                        <span class=\"wfr-step-name\">{{ step.Name }}</span>\n                        <span class=\"wfr-step-meta\">{{ step.StepType || 'Step' }}</span>\n                        <span class=\"wfr-row-status\" [attr.data-status]=\"step.Status\">{{ step.Status }}</span>\n                      </button>\n                    }\n                  </div>\n\n                  @if (SelectedStep; as step) {\n                    <div class=\"wfr-step-json\">\n                      <div class=\"wfr-step-json-head\">{{ step.Name }}</div>\n                      <mj-code-editor\n                        [ngModel]=\"SelectedStepJson\"\n                        [language]=\"'json'\"\n                        [readonly]=\"true\"\n                        style=\"width: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                  } @else {\n                    <mj-empty-state\n                      Size=\"compact\"\n                      Icon=\"fa-solid fa-hand-pointer\"\n                      Title=\"Select a step\"\n                      Message=\"Click a step on the canvas or in the list to see everything it recorded.\">\n                    </mj-empty-state>\n                  }\n                }\n              </div>\n            } @else {\n              <div class=\"wfr-json-pane\">\n                <mj-code-editor\n                  [ngModel]=\"SelectedRunJson\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"width: 100%;\">\n                </mj-code-editor>\n              </div>\n            }\n          </aside>\n        }\n      </div>\n    }\n  </mj-page-body>\n</mj-page-layout>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.wfr-status-filters {\n  display: flex;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n/* List alone until something is selected; two panes after. The canvas gets the larger share\n   because a graph is the thing being read once it is open. */\n.wfr-split {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--mj-space-3);\n  height: 100%;\n  min-height: 0;\n}\n\n.wfr-split-open {\n  grid-template-columns: minmax(28rem, 40%) 1fr;\n}\n\n@media (max-width: 900px) {\n  .wfr-split-open {\n    grid-template-columns: 1fr;\n  }\n}\n\n.wfr-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.wfr-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  width: 100%;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  text-align: left;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n}\n\n.wfr-row:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-row:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.wfr-row-selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.wfr-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.wfr-row-name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-row-when {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.wfr-row-status {\n  flex: none;\n  font-size: var(--mj-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n/* Status carries meaning, so it is encoded in colour as well as text \u2014 a failed run should be\n   findable without reading every row. Skipped stays grey on purpose: a branch that was not taken\n   is a normal outcome, not a warning. */\n.wfr-row-status[data-status='Complete'] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Failed'] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Running'] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.wfr-detail {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.wfr-detail-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-detail-title {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.wfr-detail-name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-detail-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: none;\n}\n\n/* ============================================================\n   The run list as a sortable table\n   ============================================================\n   A run list is scanned for two things \u2014 the slowest run and the one that failed \u2014 and neither is\n   answerable by scrolling. Columns line up so a reader compares down a column rather than reading\n   each row; `tabular-nums` keeps the timestamps from jittering as digits change. */\n.wfr-head,\n.wfr-row {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.9fr);\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n\n.wfr-head {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0 var(--mj-space-3) var(--mj-space-1);\n  background: var(--mj-bg-page);\n}\n\n.wfr-head-cell {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: var(--mj-space-1) 0;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-head-cell:hover {\n  color: var(--mj-text-primary);\n}\n\n.wfr-head-cell i {\n  opacity: 0.65;\n  font-size: 0.85em;\n}\n\n.wfr-col-time,\n.wfr-col-duration {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wfr-col-status {\n  justify-self: start;\n}\n\n/* ============================================================\n   Detail panel: canvas + step JSON, or the whole run as JSON\n   ============================================================ */\n.wfr-detail-tabs {\n  display: flex;\n  gap: var(--mj-space-1);\n  padding: 0 var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: var(--mj-space-2) var(--mj-space-2);\n  font-size: var(--mj-font-size-sm);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.wfr-tab-active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n/* The canvas takes the larger share; the step pane below it is a reading surface, not a diagram. */\n.wfr-graph-pane {\n  flex: 1 1 55%;\n  min-height: 12rem;\n}\n\n.wfr-steps-pane {\n  flex: 1 1 45%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  border-top: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.wfr-step-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 30%;\n  overflow-y: auto;\n}\n\n.wfr-step {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-2);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-step:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-step-selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Work that never ran must not read like work that did \u2014 the same rule the run timeline follows. */\n.wfr-step[data-status='Skipped'] .wfr-step-name {\n  text-decoration: line-through;\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-name {\n  font-weight: 600;\n}\n\n.wfr-step-meta {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-json,\n.wfr-json-pane {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.wfr-step-json-head {\n  padding: var(--mj-space-1) var(--mj-space-3);\n  font-weight: 600;\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}\n"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WorkflowRunsResourceComponent, { className: "WorkflowRunsResourceComponent", filePath: "src/Workflows/components/workflow-runs-resource.component.ts", lineNumber: 87 }); })();
+        args: [{ standalone: false, selector: 'mj-workflow-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Runs\"\n    Icon=\"fa-solid fa-timeline\"\n    Subtitle=\"Every workflow that has run \u2014 however it was started.\">\n\n    <div meta>\n      @if (!IsLoading && Runs.length > 0) {\n        <mj-stat-badge\n          [Count]=\"VisibleRuns.length\"\n          [Total]=\"Runs.length\"\n          Label=\"runs\"></mj-stat-badge>\n      }\n    </div>\n\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"loadData()\"></mj-refresh-button>\n    </div>\n\n    <div toolbar>\n      <mj-page-search\n        [Value]=\"SearchText\"\n        Placeholder=\"Search runs\"\n        (ValueChange)=\"OnSearch($event)\"></mj-page-search>\n\n      <div class=\"wfr-status-filters\">\n        @for (status of StatusFilters; track status) {\n          <button\n            type=\"button\"\n            mjButton\n            [variant]=\"StatusFilter === status ? 'primary' : 'flat'\"\n            size=\"sm\"\n            (click)=\"OnFilterByStatus(status)\">\n            {{ status === 'all' ? 'All' : status }}\n          </button>\n        }\n      </div>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (IsLoading) {\n      <mj-loading text=\"Loading runs...\"></mj-loading>\n    } @else if (LoadError) {\n      <mj-alert Variant=\"error\" [Message]=\"LoadError\"></mj-alert>\n    } @else if (Runs.length === 0) {\n      <mj-empty-state\n        Icon=\"fa-solid fa-timeline\"\n        Title=\"Nothing has run yet\"\n        Message=\"When a workflow runs \u2014 started by hand, on a schedule, or by an agent \u2014 it will appear here.\">\n      </mj-empty-state>\n    } @else if (VisibleRuns.length === 0) {\n      <mj-empty-state\n        Icon=\"fa-solid fa-filter\"\n        Title=\"No runs match\"\n        Message=\"Nothing matches the current filter. Clear it to see everything that has run.\">\n      </mj-empty-state>\n    } @else {\n      <as-split class=\"wfr-split\" direction=\"horizontal\" unit=\"percent\"\n                [gutterSize]=\"8\" [disabled]=\"!SelectedRun\" (dragEnd)=\"OnSplitDragEnd($event.sizes)\">\n        <as-split-area [size]=\"SelectedRun ? Layout.SplitSizes[0] : 100\" [minSize]=\"20\">\n        <div class=\"wfr-list\">\n          <!-- A header row that sorts. Every column a person scans by is sortable, because \"the\n               longest run\" and \"the one that failed this morning\" are the two questions this list\n               exists to answer and neither is answerable by scrolling. -->\n          <div class=\"wfr-head\" role=\"row\">\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-name\" (click)=\"OnSort('Name')\">\n              Workflow <i [ngClass]=\"SortIcon('Name')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-time\" (click)=\"OnSort('StartedAt')\">\n              Started <i [ngClass]=\"SortIcon('StartedAt')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-time\" (click)=\"OnSort('CompletedAt')\">\n              Ended <i [ngClass]=\"SortIcon('CompletedAt')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-duration\" (click)=\"OnSort('Duration')\">\n              Duration <i [ngClass]=\"SortIcon('Duration')\" aria-hidden=\"true\"></i>\n            </button>\n            <button type=\"button\" class=\"wfr-head-cell wfr-col-status\" (click)=\"OnSort('Status')\">\n              Status <i [ngClass]=\"SortIcon('Status')\" aria-hidden=\"true\"></i>\n            </button>\n          </div>\n\n          @for (run of VisibleRuns; track run.ID) {\n            <button\n              type=\"button\"\n              class=\"wfr-row\"\n              [class.wfr-row-selected]=\"run.ID === SelectedRunID\"\n              (click)=\"OnSelectRun(run)\">\n              <span class=\"wfr-col-name wfr-row-name\">{{ run.Name }}</span>\n              <!-- An em dash, never a fabricated time: a run that has not started has no start, and\n                   printing one would read as data. -->\n              <span class=\"wfr-col-time\">{{ run.StartedAt ? (run.StartedAt | date:'MMM d, h:mm:ss a') : '\u2014' }}</span>\n              <span class=\"wfr-col-time\">{{ run.CompletedAt ? (run.CompletedAt | date:'MMM d, h:mm:ss a') : '\u2014' }}</span>\n              <span class=\"wfr-col-duration\">{{ run.Duration }}</span>\n              <span class=\"wfr-col-status wfr-row-status\" [attr.data-status]=\"run.Status\">{{ run.Status }}</span>\n            </button>\n          }\n        </div>\n        </as-split-area>\n\n        <as-split-area [size]=\"SelectedRun ? Layout.SplitSizes[1] : 0\" [minSize]=\"25\" [visible]=\"!!SelectedRun\">\n        @if (SelectedRun; as selected) {\n          <!-- The canvas lives in the RIGHT PANEL on selection, not nested inside the list row.\n               A graph needs room to be read; inlining one per row turns a scannable list into a\n               stack of diagrams. -->\n          <aside class=\"wfr-detail\">\n            <header class=\"wfr-detail-head\">\n              <div class=\"wfr-detail-title\">\n                <span class=\"wfr-detail-name\">{{ selected.Name }}</span>\n                <span class=\"wfr-row-status\" [attr.data-status]=\"selected.Status\">{{ selected.Status }}</span>\n              </div>\n              <div class=\"wfr-detail-actions\">\n                @if (selected.AgentRunID) {\n                  <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnOpenAgentRun(selected)\">\n                    <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n                    Agent run\n                  </button>\n                }\n                @if (DetailTab === 'graph') {\n                  <button mjButton variant=\"flat\" size=\"sm\" (click)=\"ToggleStepPanel()\"\n                          [title]=\"Layout.StepPanelOpen ? 'Hide step details' : 'Show step details'\">\n                    <i class=\"fa-solid\" [class.fa-square-caret-right]=\"Layout.StepPanelOpen\"\n                       [class.fa-square-caret-left]=\"!Layout.StepPanelOpen\" aria-hidden=\"true\"></i>\n                  </button>\n                }\n                <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnSelectRun(selected)\" aria-label=\"Close\">\n                  <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </header>\n\n            <div class=\"wfr-detail-tabs\" role=\"tablist\">\n              <button type=\"button\" class=\"wfr-tab\" [class.wfr-tab-active]=\"DetailTab === 'graph'\"\n                      (click)=\"OnDetailTab('graph')\">\n                <i class=\"fa-solid fa-diagram-project\" aria-hidden=\"true\"></i> Workflow\n              </button>\n              <button type=\"button\" class=\"wfr-tab\" [class.wfr-tab-active]=\"DetailTab === 'json'\"\n                      (click)=\"OnDetailTab('json')\">\n                <i class=\"fa-solid fa-code\" aria-hidden=\"true\"></i> JSON\n              </button>\n            </div>\n\n            @if (Stall) {\n              <!-- The hardening review's signature failure \u2014 \"the run strands silently\" \u2014 made\n                   loud. A held path is now something the operator can answer, not just read. -->\n              <div class=\"wfr-stall\" role=\"status\" [attr.data-kind]=\"Stall.kind\">\n                <div class=\"wfr-stall-body\">\n                  <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n                  <div class=\"wfr-stall-copy\">\n                    <span>{{ Stall.message }}</span>\n                    @if (Stall.conditionText) {\n                      <code>{{ Stall.conditionText }}</code>\n                    }\n                    @if (Stall.reason) {\n                      <span class=\"wfr-stall-reason\">{{ Stall.reason }}</span>\n                    }\n                  </div>\n                </div>\n                @if (Stall.kind === 'held' && Stall.edgeID) {\n                  <div class=\"wfr-stall-actions\">\n                    <button mjButton variant=\"primary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                            (click)=\"OnOverrideEdge(Stall.edgeID!, 'true')\">\n                      Answer true\n                    </button>\n                    <button mjButton variant=\"secondary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                            (click)=\"OnOverrideEdge(Stall.edgeID!, 'false')\">\n                      Answer false\n                    </button>\n                    <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnDismissStall()\">\n                      Leave held\n                    </button>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (DetailTab === 'graph') {\n              <!-- Canvas BESIDE the step it opened, not above it. A JSON record in a strip along the\n                   bottom shows about ten lines, which is not enough of a record to read. -->\n              <as-split class=\"wfr-graph-split\" [direction]=\"InnerSplitDirection\" unit=\"percent\"\n                        [gutterSize]=\"8\" (dragEnd)=\"OnStepSplitDragEnd($event.sizes)\">\n                <as-split-area [size]=\"Layout.StepPanelOpen ? Layout.StepSplitSizes[0] : 100\" [minSize]=\"25\">\n                  <div class=\"wfr-graph-pane\">\n                    <mj-task-graph-debugger\n                      #GraphDebug\n                      [Provider]=\"ProviderToUse\"\n                      [ParentTaskID]=\"selected.ID\"\n                      [WorkflowName]=\"selected.Name\"\n                      [LiveUpdates]=\"selected.Status === 'Running' || selected.Status === 'In Progress'\"\n                      [ReplayAt]=\"ReplayAt\"\n                      [ShowLegend]=\"Layout.ShowLegend\"\n                      Height=\"100%\"\n                      (NodeSelected)=\"OnGraphNodeSelected($event)\"\n                      (ConnectionSelected)=\"OnGraphConnectionSelected($event)\"\n                      (LegendToggled)=\"OnLegendToggled($event)\"\n                      (Settled)=\"OnCanvasSettled()\"\n                      (Frame)=\"OnFrame($event)\"\n                      (PausedChange)=\"DebugPaused = $event\">\n                    </mj-task-graph-debugger>\n\n                    @if (CanReplay) {\n                      <!-- Replay: scrub through the settled run on the same canvas, reconstructed\n                           from each step's own timestamps. Read-only by construction. -->\n                      <div class=\"wfr-replay\">\n                        <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i>\n                        <input type=\"range\" min=\"0\" max=\"100\" step=\"1\"\n                               [value]=\"ReplayPercent ?? 100\"\n                               (input)=\"OnReplayScrub($any($event.target).value)\"\n                               aria-label=\"Replay position\" />\n                        @if (ReplayPercent !== null) {\n                          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"OnReplayReset()\">Now</button>\n                        }\n                      </div>\n                    }\n\n                    @if (GraphDebug.Breakpoints.length > 0 || GraphDebug.PausedAtTaskID) {\n                      <div class=\"wfr-bp-bar\" aria-label=\"Armed breakpoints\">\n                        @if (GraphDebug.PausedAtTaskID) {\n                          <span class=\"wfr-chip wfr-chip-paused\">\n                            <i class=\"fa-solid fa-pause\" aria-hidden=\"true\"></i>\n                            Paused at {{ StepName(GraphDebug.PausedAtTaskID) }}\n                          </span>\n                        }\n                        @for (id of GraphDebug.Breakpoints; track id) {\n                          <button type=\"button\" class=\"wfr-chip wfr-chip-break\" (click)=\"OnSelectBreakpoint(id)\">\n                            <i class=\"fa-solid fa-circle\" aria-hidden=\"true\"></i>\n                            {{ StepName(id) }}\n                            <span class=\"wfr-chip-x\" (click)=\"OnRemoveBreakpoint(id); $event.stopPropagation()\"\n                                  role=\"button\" tabindex=\"0\" aria-label=\"Remove breakpoint\">\u00D7</span>\n                          </button>\n                        }\n                      </div>\n                    }\n\n                    @if (EngineTicks.length > 0) {\n                      <!-- The engine strip: one tick per dispatcher pass. A stuck run is a strip\n                           that keeps ticking with nothing moving \u2014 the honest visual of a stall. -->\n                      <div class=\"wfr-engine\" aria-label=\"Engine activity\">\n                        @for (tick of EngineTicks; track tick.passNumber) {\n                          <span class=\"wfr-tick\" [class.wfr-tick-held]=\"(tick.heldCount ?? 0) > 0\">\n                            #{{ tick.passNumber }} \u00B7 ready {{ tick.eligibleCount ?? 0 }}\n                            \u00B7 held {{ tick.heldCount ?? 0 }} \u00B7 took {{ tick.claimedCount ?? 0 }}\n                          </span>\n                        }\n                        @if (GraphDebug.Paused) {\n                          <span class=\"wfr-tick wfr-tick-paused\">\u23F8 paused \u2014 nothing new starts</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </as-split-area>\n\n                <as-split-area [size]=\"Layout.StepPanelOpen ? Layout.StepSplitSizes[1] : 0\" [minSize]=\"20\"\n                               [visible]=\"Layout.StepPanelOpen\">\n                  <div class=\"wfr-steps-pane\">\n                    @if (StepsLoading) {\n                      <mj-loading text=\"Loading steps...\"></mj-loading>\n                    } @else {\n                      <div class=\"wfr-step-list\">\n                        @for (step of SelectedSteps; track step.ID) {\n                          <button type=\"button\" class=\"wfr-step\"\n                                  [class.wfr-step-selected]=\"step.ID === SelectedStepID\"\n                                  [attr.data-status]=\"step.Status\"\n                                  (click)=\"OnSelectStep(step)\">\n                            <span class=\"wfr-step-name\">{{ step.Name }}</span>\n                            <span class=\"wfr-step-meta\">{{ step.StepType || 'Step' }}</span>\n                          </button>\n                        }\n                      </div>\n\n                      @if (InspectorMode === 'edge' && SelectedEdge; as edge) {\n                        <div class=\"wfr-step-json\">\n                          <div class=\"wfr-step-json-head\">\n                            <span>{{ SelectedEdgeFromName }} \u2192 {{ SelectedEdgeToName }}</span>\n                            @if (SelectedEdgeOverride) {\n                              <span class=\"wfr-chip wfr-chip-forced\">forced {{ SelectedEdgeOverride }}</span>\n                            }\n                          </div>\n                          <div class=\"wfr-insp-card\">\n                            <span class=\"wfr-insp-label\">Condition</span>\n                            @if (edge.Condition?.trim()) {\n                              <code>{{ edge.Condition }}</code>\n                            } @else {\n                              <span>Unconditional \u2014 this path always runs.</span>\n                            }\n                          </div>\n                          @if (SelectedEdgeIsConditional) {\n                            <div class=\"wfr-insp-actions\">\n                              <button mjButton variant=\"primary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                      (click)=\"OnOverrideEdge(edge.ID, 'true')\">Answer true</button>\n                              <button mjButton variant=\"secondary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                      (click)=\"OnOverrideEdge(edge.ID, 'false')\">Answer false</button>\n                              @if (SelectedEdgeOverride) {\n                                <button mjButton variant=\"flat\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"OnOverrideEdge(edge.ID, null)\">Clear override</button>\n                              }\n                            </div>\n                          } @else {\n                            <p class=\"wfr-insp-hint\">Skip the target step instead of overriding an unconditional path.</p>\n                          }\n                        </div>\n                      } @else if (SelectedStep; as step) {\n                        <div class=\"wfr-step-json\">\n                          <div class=\"wfr-step-json-head\">\n                            <span>{{ step.Name }}</span>\n                            <span class=\"wfr-row-status\" [attr.data-status]=\"step.Status\">{{ step.Status }}</span>\n                          </div>\n\n                          <button type=\"button\" class=\"wfr-bp\"\n                                  [class.wfr-bp-on]=\"HasBreakpoint(step.ID)\"\n                                  [disabled]=\"ControlBusy\"\n                                  (click)=\"OnBreakpointToggled({ TaskID: step.ID, Enabled: !HasBreakpoint(step.ID) })\"\n                                  [attr.aria-pressed]=\"HasBreakpoint(step.ID)\"\n                                  [title]=\"HasBreakpoint(step.ID) ? 'Remove breakpoint' : 'Break before this step'\">\n                            <i class=\"fa-circle\"\n                               [class.fa-solid]=\"HasBreakpoint(step.ID)\"\n                               [class.fa-regular]=\"!HasBreakpoint(step.ID)\"\n                               aria-hidden=\"true\"></i>\n                          </button>\n\n                          <!-- The inspector: live engine facts about this step, from the frame\n                               stream \u2014 claim, path verdicts, runner progress, what-if. -->\n                          @if (SelectedStepProgress; as progress) {\n                            <div class=\"wfr-insp-card\">\n                              <span class=\"wfr-insp-label\">Doing now</span>\n                              <span>{{ progress.progressMessage }}\n                                @if (progress.progressPercent != null) { ({{ progress.progressPercent }}%) }\n                              </span>\n                            </div>\n                          }\n                          @if (SelectedStepClaim; as claim) {\n                            <div class=\"wfr-insp-card\" [class.wfr-insp-bad]=\"claim.claimEvent === 'heartbeat-lost'\">\n                              <span class=\"wfr-insp-label\">Worker</span>\n                              <span>\n                                @switch (claim.claimEvent) {\n                                  @case ('claimed') { {{ claim.claimedBy }} \u2014 working }\n                                  @case ('heartbeat-lost') { {{ claim.claimedBy }} \u2014 lost, will be requeued }\n                                  @case ('reclaimed') { requeued by the engine }\n                                }\n                              </span>\n                            </div>\n                          }\n                          @for (verdict of SelectedStepVerdicts; track verdict.edgeId) {\n                            <div class=\"wfr-insp-card\" [attr.data-verdict]=\"verdict.verdict\">\n                              <span class=\"wfr-insp-label\">\n                                @switch (verdict.verdict) {\n                                  @case ('satisfied') { Path taken }\n                                  @case ('notTaken') { Path not taken }\n                                  @case ('held') { Path can't be answered }\n                                }\n                              </span>\n                              <span>\n                                @if (verdict.conditionText) { <code>{{ verdict.conditionText }}</code> }\n                                @if (verdict.reason) { \u2014 {{ verdict.reason }} }\n                              </span>\n                            </div>\n                          }\n                          @if (SelectedStepWhatIf; as whatIf) {\n                            <div class=\"wfr-insp-card\">\n                              <span class=\"wfr-insp-label\">If this step fails</span>\n                              <span>{{ whatIf.BlockedCount }} step{{ whatIf.BlockedCount === 1 ? '' : 's' }} can no longer run</span>\n                            </div>\n                          }\n                          @if (step.Status === 'Pending' || step.Status === 'Failed' || CanForceComplete(step)) {\n                            <div class=\"wfr-insp-actions\">\n                              @if (step.Status === 'Pending') {\n                                <button mjButton variant=\"secondary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"OnSkipStep(step)\"\n                                        title=\"Declare this step not-taken; later steps proceed\">\n                                  <i class=\"fa-solid fa-forward\" aria-hidden=\"true\"></i> Skip step\n                                </button>\n                              }\n                              @if (CanEditInput(step)) {\n                                <button mjButton variant=\"secondary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"OpenEditInput(step)\">\n                                  <i class=\"fa-solid fa-pen-to-square\" aria-hidden=\"true\"></i>\n                                  {{ step.Status === 'Failed' ? 'Edit input & retry' : 'Edit input' }}\n                                </button>\n                              }\n                              @if (step.Status === 'Failed') {\n                                <button mjButton variant=\"secondary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"OnRetryStep(step)\">\n                                  <i class=\"fa-solid fa-rotate-right\" aria-hidden=\"true\"></i> Retry\n                                </button>\n                              }\n                              @if (CanForceComplete(step)) {\n                                <button mjButton variant=\"danger\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"OpenForceComplete(step)\">\n                                  <i class=\"fa-solid fa-flag-checkered\" aria-hidden=\"true\"></i> Force complete\n                                </button>\n                              }\n                            </div>\n                          }\n\n                          @if (EditInputOpen) {\n                            <div class=\"wfr-editor-card\">\n                              <span class=\"wfr-insp-label\">{{ step.Status === 'Failed' ? 'Edit input and retry' : 'Edit input' }}</span>\n                              <p class=\"wfr-insp-hint\">Applies to this run only. Invalid JSON is refused here.</p>\n                              <textarea class=\"mj-textarea wfr-json-edit\" [(ngModel)]=\"EditInputJson\"\n                                        rows=\"8\" spellcheck=\"false\"></textarea>\n                              @if (EditInputError) {\n                                <span class=\"wfr-editor-error\">{{ EditInputError }}</span>\n                              }\n                              <div class=\"wfr-insp-actions\">\n                                <button mjButton variant=\"primary\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"SubmitEditInput(step)\">\n                                  {{ step.Status === 'Failed' ? 'Apply & retry' : 'Apply' }}\n                                </button>\n                                <button mjButton variant=\"flat\" size=\"sm\" (click)=\"EditInputOpen = false\">Cancel</button>\n                              </div>\n                            </div>\n                          }\n\n                          @if (ForceCompleteOpen) {\n                            <div class=\"wfr-editor-card wfr-editor-danger\">\n                              <span class=\"wfr-insp-label\">Force complete</span>\n                              <p class=\"wfr-insp-hint\">Downstream conditions will evaluate against this output as if the step had produced it. Type the step name to confirm.</p>\n                              <textarea class=\"mj-textarea wfr-json-edit\" [(ngModel)]=\"ForceCompleteJson\"\n                                        rows=\"6\" spellcheck=\"false\"></textarea>\n                              <input class=\"mj-input\" type=\"text\" [(ngModel)]=\"ForceCompleteName\"\n                                     [placeholder]=\"'Type \u201C' + step.Name + '\u201D to confirm'\" />\n                              @if (ForceCompleteError) {\n                                <span class=\"wfr-editor-error\">{{ ForceCompleteError }}</span>\n                              }\n                              <div class=\"wfr-insp-actions\">\n                                <button mjButton variant=\"danger\" size=\"sm\" [disabled]=\"ControlBusy\"\n                                        (click)=\"SubmitForceComplete(step)\">Force complete</button>\n                                <button mjButton variant=\"flat\" size=\"sm\" (click)=\"ForceCompleteOpen = false\">Cancel</button>\n                              </div>\n                            </div>\n                          }\n\n                          <mj-task-graph-variables\n                            [InputPayload]=\"StepPayload(step, 'InputPayload')\"\n                            [OutputPayload]=\"StepPayload(step, 'OutputPayload')\"\n                            [Invocation]=\"Invocation\">\n                          </mj-task-graph-variables>\n                        </div>\n                      } @else {\n                        <mj-empty-state\n                          Size=\"compact\"\n                          Icon=\"fa-solid fa-hand-pointer\"\n                          Title=\"Select a step\"\n                          Message=\"Click a step on the canvas or in the list to see everything it recorded.\">\n                        </mj-empty-state>\n                      }\n                    }\n                  </div>\n                </as-split-area>\n              </as-split>\n            } @else {\n              <div class=\"wfr-json-pane\">\n                <mj-code-editor\n                  [ngModel]=\"SelectedRunJson\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"width: 100%;\">\n                </mj-code-editor>\n              </div>\n            }\n          </aside>\n        }\n        </as-split-area>\n      </as-split>\n    }\n  </mj-page-body>\n</mj-page-layout>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.wfr-status-filters {\n  display: flex;\n  gap: var(--mj-space-1);\n  align-items: center;\n}\n\n/* List alone until something is selected; two resizable panes after. The size is the user's \u2014 see\n   the LAYOUT_KEYS note on the component for why it is persisted server-side rather than locally. */\n.wfr-split {\n  height: 100%;\n  min-height: 0;\n}\n\n/* A gutter you can find. The default is a hairline, which is discoverable only by accident. */\n:host ::ng-deep .wfr-split > .as-split-gutter,\n:host ::ng-deep .wfr-graph-split > .as-split-gutter {\n  background: transparent !important;\n  position: relative;\n}\n\n:host ::ng-deep .wfr-split > .as-split-gutter::after,\n:host ::ng-deep .wfr-graph-split > .as-split-gutter::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n}\n\n:host ::ng-deep .wfr-split.as-horizontal > .as-split-gutter::after,\n:host ::ng-deep .wfr-graph-split.as-horizontal > .as-split-gutter::after {\n  width: 2px;\n}\n\n:host ::ng-deep .wfr-graph-split.as-vertical > .as-split-gutter::after {\n  height: 2px;\n}\n\n:host ::ng-deep .wfr-split > .as-split-gutter:hover::after,\n:host ::ng-deep .wfr-graph-split > .as-split-gutter:hover::after {\n  background: var(--mj-brand-primary);\n}\n\n/* The canvas and the step record sit SIDE BY SIDE \u2014 a JSON record in a strip along the bottom shows\n   about ten lines. Stacks below the breakpoint, where three columns would leave each too narrow to\n   use. */\n.wfr-graph-split {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.wfr-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-1);\n  overflow-y: auto;\n  min-height: 0;\n}\n\n.wfr-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  width: 100%;\n  padding: var(--mj-space-2) var(--mj-space-3);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  text-align: left;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n}\n\n.wfr-row:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-row:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.wfr-row-selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.wfr-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.wfr-row-name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-row-when {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.wfr-row-status {\n  flex: none;\n  font-size: var(--mj-font-size-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  padding: 2px var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n}\n\n/* Status carries meaning, so it is encoded in colour as well as text \u2014 a failed run should be\n   findable without reading every row. Skipped stays grey on purpose: a branch that was not taken\n   is a normal outcome, not a warning. */\n.wfr-row-status[data-status='Complete'] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Failed'] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n\n.wfr-row-status[data-status='Running'] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n.wfr-detail {\n  display: flex;\n  flex-direction: column;\n  /* Fills its split area. Without it the column sizes to its CONTENT, so the canvas below \u2014\n     `flex: 1 1 auto` of an auto-height parent \u2014 got its intrinsic height and left dead space. */\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.wfr-detail-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-2) var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-detail-title {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  min-width: 0;\n}\n\n.wfr-detail-name {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.wfr-detail-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: none;\n}\n\n/* ============================================================\n   The run list as a sortable table\n   ============================================================\n   A run list is scanned for two things \u2014 the slowest run and the one that failed \u2014 and neither is\n   answerable by scrolling. Columns line up so a reader compares down a column rather than reading\n   each row; `tabular-nums` keeps the timestamps from jittering as digits change. */\n.wfr-head,\n.wfr-row {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.9fr);\n  gap: var(--mj-space-2);\n  align-items: center;\n}\n\n.wfr-head {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0 var(--mj-space-3) var(--mj-space-1);\n  background: var(--mj-bg-page);\n}\n\n.wfr-head-cell {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: var(--mj-space-1) 0;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-head-cell:hover {\n  color: var(--mj-text-primary);\n}\n\n.wfr-head-cell i {\n  opacity: 0.65;\n  font-size: 0.85em;\n}\n\n.wfr-col-time,\n.wfr-col-duration {\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wfr-col-status {\n  justify-self: start;\n}\n\n/* ============================================================\n   Detail panel: canvas + step JSON, or the whole run as JSON\n   ============================================================ */\n.wfr-detail-tabs {\n  display: flex;\n  gap: var(--mj-space-1);\n  padding: 0 var(--mj-space-3);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.wfr-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  padding: var(--mj-space-2) var(--mj-space-2);\n  font-size: var(--mj-font-size-sm);\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.wfr-tab-active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.wfr-graph-pane {\n  height: 100%;\n  min-height: 12rem;\n}\n\n.wfr-steps-pane {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  border-left: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n/* Stacked layout puts the divider back on top, where the eye expects it. */\n:host ::ng-deep .as-vertical .wfr-steps-pane {\n  border-left: none;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.wfr-step-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-1);\n  padding: var(--mj-space-2);\n  border-bottom: 1px solid var(--mj-border-default);\n  max-height: 8rem;\n  overflow-y: auto;\n  flex: none;\n}\n\n.wfr-step {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-2);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.wfr-step:hover {\n  border-color: var(--mj-border-strong);\n}\n\n.wfr-step-selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Work that never ran must not read like work that did \u2014 the same rule the run timeline follows. */\n.wfr-step[data-status='Skipped'] .wfr-step-name {\n  text-decoration: line-through;\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-name {\n  font-weight: 600;\n}\n\n.wfr-step-meta {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n}\n\n.wfr-step-json,\n.wfr-json-pane {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.wfr-step-json-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-1) var(--mj-space-3);\n  font-weight: 600;\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n  flex: none;\n}\n\n/* \u2500\u2500 live console \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.wfr-stall {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 8px 12px;\n  margin: 0 12px 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, var(--mj-border-default));\n  border-left: 4px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-size: var(--mj-font-size-sm);\n}\n.wfr-stall-body {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n.wfr-stall i { color: var(--mj-status-warning); }\n.wfr-stall-copy {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.wfr-stall-copy code {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n}\n.wfr-stall-reason { color: var(--mj-text-secondary); }\n.wfr-stall-actions { display: flex; flex-wrap: wrap; gap: 6px; }\n\n.wfr-replay {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n.wfr-replay i { color: var(--mj-text-secondary); }\n.wfr-replay input[type='range'] { flex: 1; accent-color: var(--mj-brand-primary); }\n\n.wfr-engine {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n.wfr-tick {\n  flex: none;\n  padding: 3px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  white-space: nowrap;\n}\n.wfr-tick-held {\n  border-color: color-mix(in srgb, var(--mj-status-warning, #d97706) 45%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-status-warning, #d97706) 8%, var(--mj-bg-surface));\n}\n.wfr-tick-paused { color: var(--mj-brand-primary); border-color: var(--mj-border-strong); }\n\n.wfr-insp-card {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 7px 10px;\n  margin: 0 0 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-primary);\n}\n.wfr-insp-card code {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n}\n.wfr-insp-label {\n  font-size: var(--mj-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-secondary);\n}\n.wfr-insp-card[data-verdict='held'],\n.wfr-insp-bad {\n  border-color: color-mix(in srgb, var(--mj-status-warning, #d97706) 45%, var(--mj-border-default));\n  background: color-mix(in srgb, var(--mj-status-warning, #d97706) 8%, var(--mj-bg-surface));\n}\n.wfr-insp-card[data-verdict='satisfied'] .wfr-insp-label { color: var(--mj-status-success); }\n.wfr-insp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }\n.wfr-insp-hint {\n  margin: 0 0 8px;\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n\n.wfr-bp-bar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 12px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-page);\n}\n.wfr-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-xs);\n  cursor: pointer;\n}\n.wfr-chip-break { color: var(--mj-status-error); border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent); }\n.wfr-chip-break i { font-size: 7px; }\n.wfr-chip-paused {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  cursor: default;\n}\n.wfr-chip-forced {\n  color: var(--mj-status-warning);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  cursor: default;\n}\n.wfr-chip-x {\n  font-size: 14px;\n  line-height: 1;\n  padding: 0 2px;\n}\n.wfr-chip-x:hover { color: var(--mj-text-primary); }\n\n.wfr-bp {\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 0 8px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.wfr-bp:hover { color: var(--mj-status-error); }\n.wfr-bp-on,\n.wfr-bp-on:hover { color: var(--mj-status-error); }\n.wfr-bp i { font-size: 10px; }\n.wfr-bp:disabled { opacity: 0.45; cursor: default; }\n\n.wfr-editor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  margin: 0 0 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n}\n.wfr-editor-danger {\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n.wfr-json-edit {\n  width: 100%;\n  min-height: 120px;\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: var(--mj-font-size-xs);\n  resize: vertical;\n}\n.wfr-editor-error { color: var(--mj-status-error); font-size: var(--mj-font-size-xs); }\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { onViewportResized: [{
+            type: HostListener,
+            args: ['window:resize']
+        }], GraphDebug: [{
+            type: ViewChild,
+            args: [TaskGraphDebuggerComponent]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WorkflowRunsResourceComponent, { className: "WorkflowRunsResourceComponent", filePath: "src/Workflows/components/workflow-runs-resource.component.ts", lineNumber: 101 }); })();
 //# sourceMappingURL=workflow-runs-resource.component.js.map