@memberjunction/ng-dashboards 6.1.2 → 6.2.0-edge.0

package/dist/PredictiveStudio/components/ps-pipelines.component.js

@@ -3,175 +3,764 @@ import { CommonModule } from '@angular/common';
 import { MJButtonDirective } from '@memberjunction/ng-ui-components';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { UUIDsEqual } from '@memberjunction/global';
-import { PredictiveStudioTrainModelOperation } from '@memberjunction/core-entities';
+import { CompositeKey, Metadata } from '@memberjunction/core';
+import { PredictiveStudioTrainModelOperation, UserInfoEngine } from '@memberjunction/core-entities';
+import { NavigationService } from '@memberjunction/ng-shared';
+import { AngularSplitModule } from 'angular-split';
+import { PSPipelineWizardComponent } from './ps-pipeline-wizard.component';
 import { DOMINANCE_THRESHOLD_DEFAULT, parseDenyList, } from '@memberjunction/predictive-studio-core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+import * as i2 from "angular-split";
 const _forTrack0 = ($index, $item) => $item.ID;
-const _forTrack1 = ($index, $item) => $item.from + $item.to;
-const _forTrack2 = ($index, $item) => $item.id;
-const _forTrack3 = ($index, $item) => $item.k;
-const _forTrack4 = ($index, $item) => $item.Id;
+const _forTrack1 = ($index, $item) => $item.Id;
+const _forTrack2 = ($index, $item) => $item.from + "->" + $item.to;
+const _forTrack3 = ($index, $item) => $item.id;
+const _forTrack4 = ($index, $item) => $item.k;
 function PSPipelinesComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "span", 2);
-    i0.ɵɵelement(2, "i", 3);
+    i0.ɵɵelementStart(0, "div", 1)(1, "span", 4);
+    i0.ɵɵelement(2, "i", 5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No training pipelines yet");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p");
-    i0.ɵɵtext(6, " A training pipeline assembles features from your data, picks an algorithm, and trains a versioned model. The fastest way to build one is to describe your goal to the Model Development Agent \u2014 it designs the pipeline, guards against target leakage, and trains for you. ");
+    i0.ɵɵtext(6, " A training pipeline assembles features from your data, picks an algorithm, and trains a versioned model. You can build one step-by-step with the manual wizard or ask the Model Development Agent to design one for you. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 4);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.askAgent.emit(ctx_r1.starterPrompt)); });
-    i0.ɵɵelement(8, "i", 5);
-    i0.ɵɵtext(9, " Ask the agent to build one ");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 6)(8, "button", 7);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openWizard()); });
+    i0.ɵɵelement(9, "i", 8);
+    i0.ɵɵtext(10, " New Pipeline ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 9);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.askAgent.emit(ctx_r1.starterPrompt)); });
+    i0.ɵɵelement(12, "i", 10);
+    i0.ɵɵtext(13, " Ask the agent ");
+    i0.ɵɵelementEnd()()();
 } }
-function PSPipelinesComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+function PSPipelinesComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_For_2_Template_button_click_0_listener() { const p_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectPipeline(p_r5.ID)); });
-    i0.ɵɵelement(1, "i", 3);
-    i0.ɵɵelementStart(2, "span", 64);
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 38);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCatalog()); });
+    i0.ɵɵelement(2, "i", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 40);
+    i0.ɵɵelement(4, "i", 5);
+    i0.ɵɵelementEnd()();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_3_For_26_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_3_For_26_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_For_26_Template_button_click_0_listener() { const p_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectPipeline(p_r7.ID)); });
+    i0.ɵɵelementStart(1, "div", 56)(2, "div", 57);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 65);
+    i0.ɵɵelementStart(4, "span", 58);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 59)(7, "span", 60);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "\u2022");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 61);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 62)(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(16, PSPipelinesComponent_Conditional_2_Conditional_3_For_26_Conditional_16_Template, 3, 1, "span", 63);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_20_0;
+    const p_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("on", ctx_r1.isSelectedPipeline(p_r7));
+    i0.ɵɵproperty("title", p_r7.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(p_r7.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.statusClass(p_r7.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(p_r7.Status);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.targetEntityName(p_r7));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(p_r7.TargetVariable || "Target");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(p_r7.ProblemType);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_20_0 = ctx_r1.bestMetricForPipeline(p_r7)) ? 16 : -1, tmp_20_0);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 14)(1, "div", 41)(2, "div", 42)(3, "div", 43)(4, "h2");
     i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 44)(7, "button", 45);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openWizard()); });
+    i0.ɵɵelement(8, "i", 8);
+    i0.ɵɵtext(9, " New ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 46);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleCatalog()); });
+    i0.ɵɵelement(11, "i", 47);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 48);
+    i0.ɵɵelement(13, "i", 49);
+    i0.ɵɵelementStart(14, "input", 50);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_input_input_14_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchInput($event)); });
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 51)(16, "button", 52);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setFilter("all")); });
+    i0.ɵɵtext(17, "All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 52);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setFilter("published")); });
+    i0.ɵɵtext(19, "Published");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 52);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setFilter("draft")); });
+    i0.ɵɵtext(21, "Draft");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 52);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_3_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setFilter("core")); });
+    i0.ɵɵtext(23, "MJ Core");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "div", 53);
+    i0.ɵɵrepeaterCreate(25, PSPipelinesComponent_Conditional_2_Conditional_3_For_26_Template, 17, 11, "button", 54, _forTrack0);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const p_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("on", ctx_r1.isSelectedPipeline(p_r5));
-    i0.ɵɵproperty("title", p_r5.Name);
+    i0.ɵɵproperty("size", ctx_r1.catalogSizePct)("minSize", 18)("maxSize", 50);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Pipelines (", ctx_r1.filteredPipelines.length, ")");
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("value", ctx_r1.searchQuery);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.activeFilter === "all");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.activeFilter === "published");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.activeFilter === "draft");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.activeFilter === "core");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(p_r5.Name);
+    i0.ɵɵrepeater(ctx_r1.filteredPipelines);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, PSPipelinesComponent_Conditional_2_Conditional_20_Conditional_2_Template, 3, 1, "span", 63);
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r1.statusClass(ctx_r1.selectedPipeline.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.statusClass(p_r5.Status));
+    i0.ɵɵtextInterpolate(ctx_r1.selectedPipeline.Status);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(p_r5.Status);
+    i0.ɵɵconditional((tmp_4_0 = ctx_r1.bestMetricForPipeline(ctx_r1.selectedPipeline)) ? 2 : -1, tmp_4_0);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵelement(1, "i", 66);
+function PSPipelinesComponent_Conditional_2_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵtext(2, " Unsaved");
     i0.ɵɵelementEnd();
 } }
-function PSPipelinesComponent_Conditional_2_For_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path");
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 92);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 109);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const s_r9 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(s_r9.Ref || "Unnamed source");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(s_r9.Kind);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 113);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r12 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r12);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵrepeaterCreate(1, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Conditional_0_For_2_Template, 2, 1, "span", 113, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cols_r13 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(cols_r13);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Conditional_0_Template, 3, 0, "div", 112);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length > 0 ? 0 : -1);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 114);
+    i0.ɵɵelement(1, "i", 115);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const inputs_r14 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("From: ", inputs_r14.join(", "));
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_7_Conditional_0_Template, 4, 1, "div", 114);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length > 0 ? 0 : -1);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Template_div_click_0_listener() { const st_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectStep(st_r11.Id)); });
+    i0.ɵɵelementStart(1, "div", 111)(2, "span", 92);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 109);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(6, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_6_Template, 1, 1);
+    i0.ɵɵconditionalCreate(7, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Conditional_7_Template, 1, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_14_0;
+    let tmp_15_0;
+    const st_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(st_r11.Label || st_r11.Kind);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(st_r11.Kind);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = ctx_r1.getStepColumns(st_r11)) ? 6 : -1, tmp_14_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_15_0 = ctx_r1.getStepInputs(st_r11)) ? 7 : -1, tmp_15_0);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_99_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
+    i0.ɵɵtext(1, "No deny-list columns configured.");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_100_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 116);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r15 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(col_r15);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_100_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_100_For_1_Template, 2, 1, "span", 116, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.editLeakage.DenyFields);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_151_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelement(1, "i", 117);
+    i0.ɵɵtext(2, " No models trained yet for this pipeline. Click ");
+    i0.ɵɵelementStart(3, "strong");
+    i0.ɵɵtext(4, "Train");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(5, " to execute the first training run. ");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 122);
+    i0.ɵɵelement(1, "i", 126);
+    i0.ɵɵtext(2, " Winner");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 119);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Template_tr_click_0_listener() { const m_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openModelRecord(m_r17.ID)); });
+    i0.ɵɵelementStart(1, "td")(2, "div", 120)(3, "a", 121);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Template_a_click_3_listener($event) { const m_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.openModelRecord(m_r17.ID)); });
+    i0.ɵɵelementStart(4, "strong");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(6, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Conditional_6_Template, 3, 0, "span", 122);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "td");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td")(10, "strong");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "td")(13, "span", 58);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "td");
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "td", 123)(19, "button", 124);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Template_button_click_19_listener($event) { const m_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.openModelRecord(m_r17.ID)); });
+    i0.ɵɵelement(20, "i", 125);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const m_r17 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("winner-row", m_r17.Status === "Published");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("v", m_r17.Version);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(m_r17.Status === "Published" ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(m_r17.Algorithm || "Algorithm");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.formatHoldout(m_r17));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.statusClass(m_r17.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(m_r17.Status);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(17, 10, m_r17.TrainedAt, "short"));
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 103)(1, "thead")(2, "tr")(3, "th");
+    i0.ɵɵtext(4, "Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "th");
+    i0.ɵɵtext(6, "Algorithm");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th");
+    i0.ɵɵtext(8, "Holdout Score");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "th");
+    i0.ɵɵtext(10, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "th");
+    i0.ɵɵtext(12, "Trained At");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(13, "th");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "tbody");
+    i0.ɵɵrepeaterCreate(15, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_For_16_Template, 21, 13, "tr", 118, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(15);
+    i0.ɵɵrepeater(ctx_r1.pipelineModels);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_164_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 127);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_164_Template_button_click_0_listener() { const pub_r19 = i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openModelRecord(pub_r19.ID)); });
+    i0.ɵɵelement(1, "i", 125);
+    i0.ɵɵtext(2, " Open Model Record ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 128);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_164_Template_button_click_3_listener() { const pub_r19 = i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.viewTrainingRuns(pub_r19.ID)); });
+    i0.ɵɵelement(4, "i", 129);
+    i0.ɵɵtext(5, " View Training Runs ");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_170_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const pub_r20 = ctx;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate3("v", pub_r20.Version, " (", pub_r20.Algorithm || "Model", ") \u2022 ID: ", pub_r20.ID.slice(0, 8), "\u2026");
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_171_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 106);
+    i0.ɵɵtext(1, "No published model serving live predictions yet.");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 66)(2, "div", 67)(3, "div", 68)(4, "span", 69);
+    i0.ɵɵtext(5, "1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div")(7, "h3");
+    i0.ɵɵtext(8, "Target Definition & Temporal Decision Boundary");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 70);
+    i0.ɵɵtext(10, "Defines the training unit entity, target variable, problem type, and point-in-time cutoff.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(11, "div", 71)(12, "div", 72)(13, "label");
+    i0.ɵɵtext(14, "Target Entity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 73);
+    i0.ɵɵelement(16, "i", 74);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 75);
+    i0.ɵɵtext(19, "Primary training unit");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 72)(21, "label");
+    i0.ɵɵtext(22, "Target Variable");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 73);
+    i0.ɵɵelement(24, "i", 76);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 75);
+    i0.ɵɵtext(27);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "div", 72)(29, "label");
+    i0.ɵɵtext(30, "Problem Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "div", 73);
+    i0.ɵɵelement(32, "i", 77);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "div", 75);
+    i0.ɵɵtext(35, "Optimization discipline");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "div", 78)(37, "label");
+    i0.ɵɵtext(38, "As-Of Temporal Anchor");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "div", 73);
+    i0.ɵɵelement(40, "i", 79);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "div", 75);
+    i0.ɵɵtext(43, "Temporal cutoff to prevent leakage");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(44, "div", 66)(45, "div", 67)(46, "div", 68)(47, "span", 69);
+    i0.ɵɵtext(48, "2");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(49, "div")(50, "h3");
+    i0.ɵɵtext(51, "Feature Architecture & Relational Data Sources");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "span", 70);
+    i0.ɵɵtext(53, "Combines core entity attributes with linked relational features across the database.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(54, "div", 80)(55, "button", 81);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Template_button_click_55_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addSource()); });
+    i0.ɵɵelement(56, "i", 8);
+    i0.ɵɵtext(57, " Add Source");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(58, "button", 82);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_41_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addStep()); });
+    i0.ɵɵelement(59, "i", 83);
+    i0.ɵɵtext(60, " Add Step");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(61, "div", 84)(62, "div", 85)(63, "div", 86)(64, "span");
+    i0.ɵɵelement(65, "i", 87);
+    i0.ɵɵtext(66);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(67, "div", 88);
+    i0.ɵɵrepeaterCreate(68, PSPipelinesComponent_Conditional_2_Conditional_41_For_69_Template, 5, 2, "div", 89, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(70, "div", 85)(71, "div", 86)(72, "span");
+    i0.ɵɵelement(73, "i", 83);
+    i0.ɵɵtext(74);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(75, "div", 88);
+    i0.ɵɵrepeaterCreate(76, PSPipelinesComponent_Conditional_2_Conditional_41_For_77_Template, 8, 4, "div", 90, _forTrack1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(78, "div", 85)(79, "div", 86)(80, "span");
+    i0.ɵɵelement(81, "i", 91);
+    i0.ɵɵtext(82, " Selected Algorithm");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(83, "div", 88)(84, "div", 89)(85, "span", 92);
+    i0.ɵɵtext(86);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(87, "span", 93);
+    i0.ɵɵtext(88, "Active");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(89, "div", 94);
+    i0.ɵɵelement(90, "i", 95);
+    i0.ɵɵelementStart(91, "div", 96)(92, "div", 97);
+    i0.ɵɵtext(93, "Leakage Guard Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(94, "div", 98);
+    i0.ɵɵtext(95, " Deny-listed columns are excluded prior to matrix assembly. Dominance threshold: ");
+    i0.ɵɵelementStart(96, "strong");
+    i0.ɵɵtext(97);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(98, "div", 99);
+    i0.ɵɵconditionalCreate(99, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_99_Template, 2, 0, "span", 100)(100, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_100_Template, 2, 0);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(101, "div", 66)(102, "div", 67)(103, "div", 68)(104, "span", 69);
+    i0.ɵɵtext(105, "3");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(106, "div")(107, "h3");
+    i0.ɵɵtext(108, "Fitted Preprocessing & Validation Discipline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(109, "span", 70);
+    i0.ɵɵtext(110, "Parameters fitted once on training folds and frozen with the model artifact for inference anti-skew.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(111, "div", 71)(112, "div", 72)(113, "label");
+    i0.ɵɵtext(114, "Validation Strategy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(115, "div", 73);
+    i0.ɵɵtext(116);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(117, "div", 75);
+    i0.ɵɵtext(118, "Cross-validation split");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(119, "div", 72)(120, "label");
+    i0.ɵɵtext(121, "Locked Holdout");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(122, "div", 73);
+    i0.ɵɵtext(123);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(124, "div", 75);
+    i0.ɵɵtext(125, "Honest benchmark score");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(126, "div", 72)(127, "label");
+    i0.ɵɵtext(128, "Folds / Split");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(129, "div", 73);
+    i0.ɵɵtext(130);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(131, "div", 75);
+    i0.ɵɵtext(132, "Training evaluation");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(133, "div", 72)(134, "label");
+    i0.ɵɵtext(135, "Anti-Skew Guarantee");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(136, "div", 73);
+    i0.ɵɵelement(137, "i", 101);
+    i0.ɵɵtext(138, " Enforced");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(139, "div", 75);
+    i0.ɵɵtext(140, "Frozen params travel with model");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(141, "div", 66)(142, "div", 67)(143, "div", 68)(144, "span", 69);
+    i0.ɵɵtext(145, "4");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(146, "div")(147, "h3");
+    i0.ɵɵtext(148, "Multi-Algorithm Tournament Leaderboard");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(149, "span", 70);
+    i0.ɵɵtext(150, "Models trained and scored on locked holdout data for this pipeline.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵconditionalCreate(151, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_151_Template, 6, 0, "div", 102)(152, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_152_Template, 17, 0, "table", 103);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(153, "div", 66)(154, "div", 67)(155, "div", 68)(156, "span", 69);
+    i0.ɵɵtext(157, "5");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(158, "div")(159, "h3");
+    i0.ɵɵtext(160, "Production Serving & Model Registry");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(161, "span", 70);
+    i0.ɵɵtext(162, "Active inference wiring and model registry status.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(163, "div", 104);
+    i0.ɵɵconditionalCreate(164, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_164_Template, 6, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(165, "div", 105)(166, "div", 72)(167, "label");
+    i0.ɵɵtext(168, "Active Serving Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(169, "div", 73);
+    i0.ɵɵconditionalCreate(170, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_170_Template, 2, 3, "span")(171, PSPipelinesComponent_Conditional_2_Conditional_41_Conditional_171_Template, 2, 0, "span", 106);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(172, "div", 75);
+    i0.ɵɵtext(173);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(174, "div", 107)(175, "label");
+    i0.ɵɵtext(176, "Inference Readiness");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(177, "div", 108);
+    i0.ɵɵelement(178, "i", 30);
+    i0.ɵɵtext(179, " Ready ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(180, "div", 75);
+    i0.ɵɵtext(181, "Batch & on-demand scoring enabled");
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const edge_r6 = ctx.$implicit;
+    let tmp_18_0;
+    let tmp_19_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("d", ctx_r1.edgePath(edge_r6));
+    i0.ɵɵadvance(17);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.targetEntityName(ctx_r1.selectedPipeline));
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.editTargetVariable || "Not set");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.editProblemType, " outcome");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.editProblemType);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.asOfLabel);
+    i0.ɵɵadvance(25);
+    i0.ɵɵtextInterpolate1(" Feed-In Sources (", ctx_r1.editSources.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.editSources);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" Feature Transforms (", ctx_r1.editSteps.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.editSteps);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedAlgorithmName);
+    i0.ɵɵadvance(11);
+    i0.ɵɵtextInterpolate(ctx_r1.editLeakage.SingleFeatureDominanceThreshold);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.editLeakage.DenyFields.length === 0 ? 99 : 100);
+    i0.ɵɵadvance(17);
+    i0.ɵɵtextInterpolate(ctx_r1.editValidation.Strategy);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1("", (ctx_r1.editValidation.LockedHoldoutFraction * 100).toFixed(0), "%");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.editValidation.Strategy === "kfold" ? (ctx_r1.editValidation.K || 5) + " Folds" : ((ctx_r1.editValidation.TestSize || 0.2) * 100).toFixed(0) + "% Test");
+    i0.ɵɵadvance(21);
+    i0.ɵɵconditional(ctx_r1.pipelineModels.length === 0 ? 151 : 152);
+    i0.ɵɵadvance(13);
+    i0.ɵɵconditional((tmp_18_0 = ctx_r1.publishedModel) ? 164 : -1, tmp_18_0);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional((tmp_19_0 = ctx_r1.publishedModel) ? 170 : 171, tmp_19_0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("Model: ", (ctx_r1.publishedModel == null ? null : ctx_r1.publishedModel.Status) || "None", " \u2022 Pipeline: ", ctx_r1.selectedPipeline == null ? null : ctx_r1.selectedPipeline.Status);
 } }
-function PSPipelinesComponent_Conditional_2_For_38_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 69);
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 164);
+} if (rf & 2) {
+    const edge_r22 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", ctx_r1.isEdgeActive(edge_r22));
+    i0.ɵɵattribute("d", ctx_r1.edgePath(edge_r22))("marker-end", ctx_r1.isEdgeActive(edge_r22) ? "url(#ps-arrow-active)" : "url(#ps-arrow)");
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 109);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r8 = i0.ɵɵnextContext().$implicit;
+    const node_r24 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(node_r8.tag);
+    i0.ɵɵtextInterpolate(node_r24.tag);
 } }
-function PSPipelinesComponent_Conditional_2_For_38_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71)(1, "span", 74);
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 170)(1, "span", 173);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵelementStart(3, "span", 174);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const row_r9 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r9.k);
+    const row_r25 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(row_r9.v);
+    i0.ɵɵtextInterpolate(row_r25.k);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", row_r25.v);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r25.v);
 } }
-function PSPipelinesComponent_Conditional_2_For_38_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 72);
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 171);
 } }
-function PSPipelinesComponent_Conditional_2_For_38_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 73);
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 172);
 } }
-function PSPipelinesComponent_Conditional_2_For_38_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_For_38_Template_div_click_0_listener() { const node_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectNode(node_r8.id)); });
-    i0.ɵɵelementStart(1, "div", 68);
-    i0.ɵɵelement(2, "i", 42);
-    i0.ɵɵelementStart(3, "span");
+function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Template_div_click_0_listener() { const node_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectNode(node_r24.id)); });
+    i0.ɵɵelementStart(1, "div", 166);
+    i0.ɵɵelement(2, "i", 167);
+    i0.ɵɵelementStart(3, "span", 168);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, PSPipelinesComponent_Conditional_2_For_38_Conditional_5_Template, 2, 1, "span", 69);
+    i0.ɵɵconditionalCreate(5, PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_5_Template, 2, 1, "span", 109);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 70);
-    i0.ɵɵrepeaterCreate(7, PSPipelinesComponent_Conditional_2_For_38_For_8_Template, 5, 2, "div", 71, _forTrack3);
+    i0.ɵɵelementStart(6, "div", 169);
+    i0.ɵɵrepeaterCreate(7, PSPipelinesComponent_Conditional_2_Conditional_42_For_38_For_8_Template, 5, 3, "div", 170, _forTrack4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, PSPipelinesComponent_Conditional_2_For_38_Conditional_9_Template, 1, 0, "span", 72);
-    i0.ɵɵconditionalCreate(10, PSPipelinesComponent_Conditional_2_For_38_Conditional_10_Template, 1, 0, "span", 73);
+    i0.ɵɵconditionalCreate(9, PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_9_Template, 1, 0, "span", 171);
+    i0.ɵɵconditionalCreate(10, PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Conditional_10_Template, 1, 0, "span", 172);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r8 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("left", node_r8.x, "px")("top", node_r8.y, "px");
-    i0.ɵɵclassProp("selected", node_r8.id === ctx_r1.selectedId);
-    i0.ɵɵproperty("ngClass", node_r8.type);
-    i0.ɵɵattribute("data-node-id", node_r8.id);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", node_r8.icon);
+    const node_r24 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("left", node_r24.x, "px")("top", node_r24.y, "px")("width", ctx_r1.NODE_W, "px");
+    i0.ɵɵclassProp("selected", node_r24.id === ctx_r1.selectedId);
+    i0.ɵɵproperty("ngClass", node_r24.type);
+    i0.ɵɵattribute("data-node-id", node_r24.id);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r8.title);
+    i0.ɵɵproperty("ngClass", node_r24.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", node_r24.title);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r8.tag ? 5 : -1);
+    i0.ɵɵtextInterpolate(node_r24.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r24.tag ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(node_r8.rows);
+    i0.ɵɵrepeater(node_r24.rows);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(node_r8.hasIn ? 9 : -1);
+    i0.ɵɵconditional(node_r24.hasIn ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r8.hasOut ? 10 : -1);
+    i0.ɵɵconditional(node_r24.hasOut ? 10 : -1);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 75);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_65_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.deleteSelected()); });
-    i0.ɵɵelement(1, "i", 76);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 198);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteSelected()); });
+    i0.ɵɵelement(1, "i", 199);
     i0.ɵɵelementEnd();
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_67_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 77);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const k_r12 = ctx.$implicit;
-    i0.ɵɵproperty("value", k_r12);
+    const k_r29 = ctx.$implicit;
+    i0.ɵɵproperty("value", k_r29);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(k_r12);
+    i0.ɵɵtextInterpolate(k_r29);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_67_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Kind");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_67_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSourceKind($event.target.value)); });
-    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_67_For_5_Template, 2, 2, "option", 77, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setSourceKind(ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_For_5_Template, 2, 2, "option", 200, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 50)(7, "label");
+    i0.ɵɵelementStart(6, "div", 186)(7, "label");
     i0.ɵɵtext(8, "Reference (entity / query / id)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_67_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSourceRef($event.target.value)); });
+    i0.ɵɵelementStart(9, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setSourceRef(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 50)(11, "label");
+    i0.ɵɵelementStart(10, "div", 186)(11, "label");
     i0.ɵɵtext(12, "Alias (optional)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_67_Template_input_input_13_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSourceAlias($event.target.value)); });
+    i0.ɵɵelementStart(13, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_Template_input_input_13_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setSourceAlias(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.selectedSource.Kind);
     i0.ɵɵadvance();
@@ -181,69 +770,69 @@ function PSPipelinesComponent_Conditional_2_Conditional_67_Template(rf, ctx) { i
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", ctx_r1.selectedSource.Alias || "");
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 77);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const k_r14 = ctx.$implicit;
-    i0.ɵɵproperty("value", k_r14);
+    const k_r31 = ctx.$implicit;
+    i0.ɵɵproperty("value", k_r31);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(k_r14);
+    i0.ɵɵtextInterpolate(k_r31);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_10_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_10_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Columns (comma-separated)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_10_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setColumns($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_10_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setColumns(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.columnsText);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_11_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_11_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Columns (comma-separated)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_11_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setColumns($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_11_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setColumns(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.columnsText);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 77);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const s_r18 = ctx.$implicit;
-    i0.ɵɵproperty("value", s_r18);
+    const s_r35 = ctx.$implicit;
+    i0.ɵɵproperty("value", s_r35);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(s_r18);
+    i0.ɵɵtextInterpolate(s_r35);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 50)(5, "label");
+    i0.ɵɵelementStart(4, "div", 186)(5, "label");
     i0.ɵɵtext(6, "Strategy");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_Template_select_change_7_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("Strategy", $event.target.value)); });
-    i0.ɵɵrepeaterCreate(8, PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_For_9_Template, 2, 2, "option", 77, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(7, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_Template_select_change_7_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("Strategy", ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(8, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_For_9_Template, 2, 2, "option", 200, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("Column"));
     i0.ɵɵadvance(4);
@@ -251,62 +840,62 @@ function PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.imputeStrategies);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_13_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_13_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_13_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_13_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("Column"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_14_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_14_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_14_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_14_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("Column", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 50)(5, "label");
+    i0.ɵɵelementStart(4, "div", 186)(5, "label");
     i0.ɵɵtext(6, "Bins");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "input", 78);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_14_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepNum("Bins", $event.target.value)); });
+    i0.ɵɵelementStart(7, "input", 201);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_14_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepNum("Bins", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("Column"));
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", ctx_r1.stepField("Bins"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_15_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("Entity", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_15_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("Entity", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 50)(5, "label");
+    i0.ɵɵelementStart(4, "div", 186)(5, "label");
     i0.ɵɵtext(6, "Embedding model ref");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("EmbeddingModelRef", $event.target.value)); });
+    i0.ɵɵelementStart(7, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_15_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("EmbeddingModelRef", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 50)(9, "label");
+    i0.ɵɵelementStart(8, "div", 186)(9, "label");
     i0.ɵɵtext(10, "Dimensions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "input", 78);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template_input_input_11_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepNum("Dims", $event.target.value)); });
+    i0.ɵɵelementStart(11, "input", 201);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_15_Template_input_input_11_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepNum("Dims", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("Entity"));
     i0.ɵɵadvance(4);
@@ -314,95 +903,64 @@ function PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template(rf,
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", ctx_r1.stepField("Dims"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_16_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_16_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Feature Pipeline ref");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_16_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("FeaturePipelineRef", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_16_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("FeaturePipelineRef", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("FeaturePipelineRef"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_17_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_17_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Flow Agent ref");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_17_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("FlowAgentRef", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_17_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("FlowAgentRef", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("FlowAgentRef"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Case_18_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_18_Template(rf, ctx) { if (rf & 1) {
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Image column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Case_18_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setStepStr("ImageColumn", $event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_18_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setStepStr("ImageColumn", ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.stepField("ImageColumn"));
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Conditional_19_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 80)(1, "input", 82);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_68_Conditional_19_For_5_Template_input_change_1_listener() { const s_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleInput(s_r26.Id)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const s_r26 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.hasInput(s_r26.Id));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", s_r26.Label || s_r26.Kind);
-} }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
-    i0.ɵɵtext(2, "Inputs (upstream steps)");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 79);
-    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_68_Conditional_19_For_5_Template, 3, 2, "label", 80, _forTrack4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 81);
-    i0.ɵɵtext(7, "No inputs = a root step fed directly by the sources.");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r1.otherSteps);
-} }
-function PSPipelinesComponent_Conditional_2_Conditional_68_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Kind");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_68_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setStepKind($event.target.value)); });
-    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_68_For_5_Template, 2, 2, "option", 77, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setStepKind(ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_For_5_Template, 2, 2, "option", 200, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 50)(7, "label");
+    i0.ɵɵelementStart(6, "div", 186)(7, "label");
     i0.ɵɵtext(8, "Label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_68_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setStepLabel($event.target.value)); });
+    i0.ɵɵelementStart(9, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setStepLabel(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, PSPipelinesComponent_Conditional_2_Conditional_68_Case_10_Template, 4, 1, "div", 50)(11, PSPipelinesComponent_Conditional_2_Conditional_68_Case_11_Template, 4, 1, "div", 50)(12, PSPipelinesComponent_Conditional_2_Conditional_68_Case_12_Template, 10, 2)(13, PSPipelinesComponent_Conditional_2_Conditional_68_Case_13_Template, 4, 1, "div", 50)(14, PSPipelinesComponent_Conditional_2_Conditional_68_Case_14_Template, 8, 2)(15, PSPipelinesComponent_Conditional_2_Conditional_68_Case_15_Template, 12, 3)(16, PSPipelinesComponent_Conditional_2_Conditional_68_Case_16_Template, 4, 1, "div", 50)(17, PSPipelinesComponent_Conditional_2_Conditional_68_Case_17_Template, 4, 1, "div", 50)(18, PSPipelinesComponent_Conditional_2_Conditional_68_Case_18_Template, 4, 1, "div", 50);
-    i0.ɵɵconditionalCreate(19, PSPipelinesComponent_Conditional_2_Conditional_68_Conditional_19_Template, 8, 0, "div", 50);
+    i0.ɵɵconditionalCreate(10, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_10_Template, 4, 1, "div", 186)(11, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_11_Template, 4, 1, "div", 186)(12, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_12_Template, 10, 2)(13, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_13_Template, 4, 1, "div", 186)(14, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_14_Template, 8, 2)(15, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_15_Template, 12, 3)(16, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_16_Template, 4, 1, "div", 186)(17, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_17_Template, 4, 1, "div", 186)(18, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Case_18_Template, 4, 1, "div", 186);
 } if (rf & 2) {
-    let tmp_5_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    let tmp_7_0;
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.selectedStep.Kind);
     i0.ɵɵadvance();
@@ -410,37 +968,35 @@ function PSPipelinesComponent_Conditional_2_Conditional_68_Template(rf, ctx) { i
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("value", ctx_r1.selectedStep.Label || "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_5_0 = ctx_r1.selectedStep.Kind) === "select" ? 10 : tmp_5_0 === "standardize" ? 11 : tmp_5_0 === "impute" ? 12 : tmp_5_0 === "onehot" ? 13 : tmp_5_0 === "bin" ? 14 : tmp_5_0 === "embedding" ? 15 : tmp_5_0 === "llm-derived" ? 16 : tmp_5_0 === "flow-agent" ? 17 : tmp_5_0 === "vision-llm" ? 18 : -1);
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.otherSteps.length > 0 ? 19 : -1);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.selectedStep.Kind) === "select" ? 10 : tmp_7_0 === "standardize" ? 11 : tmp_7_0 === "impute" ? 12 : tmp_7_0 === "onehot" ? 13 : tmp_7_0 === "bin" ? 14 : tmp_7_0 === "embedding" ? 15 : tmp_7_0 === "llm-derived" ? 16 : tmp_7_0 === "flow-agent" ? 17 : tmp_7_0 === "vision-llm" ? 18 : -1);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_69_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 77);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const pt_r28 = ctx.$implicit;
-    i0.ɵɵproperty("value", pt_r28);
+    const pt_r43 = ctx.$implicit;
+    i0.ɵɵproperty("value", pt_r43);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(pt_r28);
+    i0.ɵɵtextInterpolate(pt_r43);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_69_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Target variable");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_69_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setTargetVariable($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setTargetVariable(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 50)(5, "label");
+    i0.ɵɵelementStart(4, "div", 186)(5, "label");
     i0.ɵɵtext(6, "Problem type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_69_Template_select_change_7_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setProblemType($event.target.value)); });
-    i0.ɵɵrepeaterCreate(8, PSPipelinesComponent_Conditional_2_Conditional_69_For_9_Template, 2, 2, "option", 77, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(7, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_Template_select_change_7_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setProblemType(ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(8, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_For_9_Template, 2, 2, "option", 200, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editTargetVariable);
     i0.ɵɵadvance(4);
@@ -448,42 +1004,73 @@ function PSPipelinesComponent_Conditional_2_Conditional_69_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.problemTypes);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_70_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 77);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const a_r30 = ctx.$implicit;
-    i0.ɵɵproperty("value", a_r30.ID);
+    const a_r45 = ctx.$implicit;
+    i0.ɵɵproperty("value", a_r45.ID);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(a_r30.Name);
+    i0.ɵɵtextInterpolate(a_r45.Name);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_70_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 203)(1, "div", 204);
+    i0.ɵɵtext(2, "Current Serving Winner");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 205)(4, "span", 206);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 122);
+    i0.ɵɵelement(7, "i", 126);
+    i0.ɵɵtext(8, " Active");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 80)(10, "button", 207);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Conditional_10_Template_button_click_10_listener() { const pub_r47 = i0.ɵɵrestoreView(_r46); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openModelRecord(pub_r47.ID)); });
+    i0.ɵɵelement(11, "i", 125);
+    i0.ɵɵtext(12, " Model ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 208);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Conditional_10_Template_button_click_13_listener() { const pub_r47 = i0.ɵɵrestoreView(_r46); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.viewTrainingRuns(pub_r47.ID)); });
+    i0.ɵɵelement(14, "i", 129);
+    i0.ɵɵtext(15, " Runs ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const pub_r47 = ctx;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate2("v", pub_r47.Version, " (", pub_r47.Algorithm || "Model", ")");
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Algorithm");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_70_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setAlgorithm($event.target.value)); });
-    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_70_For_5_Template, 2, 2, "option", 77, _forTrack0);
+    i0.ɵɵelementStart(3, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setAlgorithm(ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_For_5_Template, 2, 2, "option", 200, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 50)(7, "label");
+    i0.ɵɵelementStart(6, "div", 186)(7, "label");
     i0.ɵɵtext(8, "Hyperparameters (JSON)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "textarea", 83);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_70_Template_textarea_input_9_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setHyperparams($event.target.value)); });
+    i0.ɵɵelementStart(9, "textarea", 202);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Template_textarea_input_9_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setHyperparams(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(10, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Conditional_10_Template, 16, 2, "div", 203);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    let tmp_7_0;
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editAlgorithmId);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.algorithms);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("value", ctx_r1.editHyperparams);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.publishedModel) ? 10 : -1, tmp_7_0);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_71_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 179);
     i0.ɵɵtext(1, "The trained model artifact. Run ");
     i0.ɵɵelementStart(2, "strong");
     i0.ɵɵtext(3, "Train");
@@ -491,281 +1078,508 @@ function PSPipelinesComponent_Conditional_2_Conditional_71_Template(rf, ctx) { i
     i0.ɵɵtext(4, " to produce a new versioned model from this pipeline.");
     i0.ɵɵelementEnd();
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_102_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_1_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 200);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const m_r49 = ctx.$implicit;
+    i0.ɵɵproperty("value", m_r49.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate3("v", m_r49.Version, " \u00B7 ", m_r49.Algorithm || "Algorithm", " (", m_r49.Status, ")");
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r48 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
+    i0.ɵɵtext(2, "Model Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_1_Template_select_change_3_listener($event) { i0.ɵɵrestoreView(_r48); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.selectModelVersion(ctx_r1.inputVal($event))); });
+    i0.ɵɵrepeaterCreate(4, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_1_For_5_Template, 2, 4, "option", 200, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r1.inspectedModel == null ? null : ctx_r1.inspectedModel.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.pipelineModels);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 122);
+    i0.ɵɵelement(1, "i", 126);
+    i0.ɵɵtext(2, " Winner");
+    i0.ɵɵelementEnd();
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 210)(1, "div", 211)(2, "div", 120)(3, "strong");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Conditional_5_Template, 3, 0, "span", 122);
+    i0.ɵɵelementStart(6, "span", 58);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "span", 212);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 213);
+    i0.ɵɵtext(11, " Algorithm: ");
+    i0.ɵɵelementStart(12, "strong");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 213);
+    i0.ɵɵtext(15, " Holdout Score: ");
+    i0.ɵɵelementStart(16, "strong");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 214)(19, "button", 215);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Template_button_click_19_listener() { const mdl_r51 = i0.ɵɵrestoreView(_r50); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.openModelRecord(mdl_r51.ID)); });
+    i0.ɵɵelement(20, "i", 125);
+    i0.ɵɵtext(21, " Open Model Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 216);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Template_button_click_22_listener() { const mdl_r51 = i0.ɵɵrestoreView(_r50); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.viewTrainingRuns(mdl_r51.ID)); });
+    i0.ɵɵelement(23, "i", 129);
+    i0.ɵɵtext(24, " View Training Runs ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const mdl_r51 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("v", mdl_r51.Version);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(mdl_r51.Status === "Published" ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.statusClass(mdl_r51.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(mdl_r51.Status);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", mdl_r51.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", mdl_r51.ID.slice(0, 8), "\u2026");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(mdl_r51.Algorithm || ctx_r1.selectedAlgorithmName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.formatHoldout(mdl_r51));
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 209);
+    i0.ɵɵconditionalCreate(1, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_1_Template, 6, 1, "div", 186);
+    i0.ɵɵconditionalCreate(2, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Conditional_2_Template, 25, 9, "div", 210);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_6_0;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.pipelineModels.length > 1 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.inspectedModel) ? 2 : -1, tmp_6_0);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_0_Template, 5, 0, "div", 179)(1, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Conditional_1_Template, 3, 2, "div", 209);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r1.pipelineModels.length === 0 ? 0 : 1);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    const _r52 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Decision-date column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_102_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setAsOfColumn($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_49_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r52); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setAsOfColumn(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editAsOf.Column || "");
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_103_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    const _r53 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Offset days before label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 78);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_103_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setAsOfOffset($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 201);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_50_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r53); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setAsOfOffset(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editAsOf.OffsetDays ?? 0);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_120_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    const _r54 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Test size");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 62);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_120_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setTestSize($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 197);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_67_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r54); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setTestSize(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editValidation.TestSize ?? 0.2);
 } }
-function PSPipelinesComponent_Conditional_2_Conditional_121_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "label");
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    const _r55 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186)(1, "label");
     i0.ɵɵtext(2, "Folds (k)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 78);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_121_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setK($event.target.value)); });
+    i0.ɵɵelementStart(3, "input", 201);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_68_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r55); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setK(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.editValidation.K ?? 5);
 } }
-function PSPipelinesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵrepeaterCreate(1, PSPipelinesComponent_Conditional_2_For_2_Template, 6, 7, "button", 7, _forTrack0);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 8)(4, "button", 9);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.save()); });
-    i0.ɵɵelement(5, "i", 10);
-    i0.ɵɵtext(6, " Save ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 11);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.validate()); });
-    i0.ɵɵelement(8, "i", 12);
-    i0.ɵɵtext(9, " Validate ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 13);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.train()); });
-    i0.ɵɵelement(11, "i", 14);
-    i0.ɵɵtext(12, " Train ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 15);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refine()); });
-    i0.ɵɵelement(14, "i", 16);
-    i0.ɵɵtext(15, " Agent ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "span", 17);
-    i0.ɵɵconditionalCreate(17, PSPipelinesComponent_Conditional_2_Conditional_17_Template, 3, 0, "span", 18);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 19)(19, "div", 20)(20, "div", 21)(21, "span", 22);
-    i0.ɵɵtext(22, "Add:");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "button", 23);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addSource()); });
-    i0.ɵɵelement(24, "i", 24);
-    i0.ɵɵtext(25, " Source");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "button", 25);
-    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addStep()); });
-    i0.ɵɵelement(27, "i", 26);
-    i0.ɵɵtext(28, " Feature step");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "span", 17);
-    i0.ɵɵelementStart(30, "span", 27);
-    i0.ɵɵelement(31, "i", 28);
-    i0.ɵɵtext(32);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 29);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(34, "svg", 30);
-    i0.ɵɵrepeaterCreate(35, PSPipelinesComponent_Conditional_2_For_36_Template, 1, 1, ":svg:path", null, _forTrack1);
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(37, PSPipelinesComponent_Conditional_2_For_38_Template, 11, 13, "div", 31, _forTrack2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(39, "div", 32)(40, "div", 33)(41, "span");
-    i0.ɵɵelement(42, "i", 34);
-    i0.ɵɵtext(43, " Source");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "span");
-    i0.ɵɵelement(45, "i", 35);
-    i0.ɵɵtext(46, " Feature");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "span");
-    i0.ɵɵelement(48, "i", 36);
-    i0.ɵɵtext(49, " Embedding");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "span");
-    i0.ɵɵelement(51, "i", 37);
-    i0.ɵɵtext(52, " Target");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "span");
-    i0.ɵɵelement(54, "i", 38);
-    i0.ɵɵtext(55, " Algorithm");
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(56, "div", 39)(57, "div", 40)(58, "div", 41);
-    i0.ɵɵelement(59, "i", 42);
-    i0.ɵɵelementStart(60, "div", 43)(61, "h3", 44);
-    i0.ɵɵtext(62);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "div", 27);
-    i0.ɵɵtext(64);
+function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 14)(1, "div", 175)(2, "div", 176)(3, "div", 177);
+    i0.ɵɵelement(4, "i", 167);
+    i0.ɵɵelementStart(5, "div", 96)(6, "h3", 178);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 179);
+    i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(65, PSPipelinesComponent_Conditional_2_Conditional_65_Template, 2, 0, "button", 45);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(66, "div", 46);
-    i0.ɵɵconditionalCreate(67, PSPipelinesComponent_Conditional_2_Conditional_67_Template, 14, 3);
-    i0.ɵɵconditionalCreate(68, PSPipelinesComponent_Conditional_2_Conditional_68_Template, 20, 4);
-    i0.ɵɵconditionalCreate(69, PSPipelinesComponent_Conditional_2_Conditional_69_Template, 10, 2);
-    i0.ɵɵconditionalCreate(70, PSPipelinesComponent_Conditional_2_Conditional_70_Template, 10, 2);
-    i0.ɵɵconditionalCreate(71, PSPipelinesComponent_Conditional_2_Conditional_71_Template, 5, 0, "div", 27);
+    i0.ɵɵelementStart(10, "button", 180);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleInspector()); });
+    i0.ɵɵelement(11, "i", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_12_Template, 2, 0, "button", 181);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 182);
+    i0.ɵɵconditionalCreate(14, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_14_Template, 14, 3);
+    i0.ɵɵconditionalCreate(15, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_15_Template, 19, 3);
+    i0.ɵɵconditionalCreate(16, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_16_Template, 10, 2);
+    i0.ɵɵconditionalCreate(17, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_17_Template, 11, 3);
+    i0.ɵɵconditionalCreate(18, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_18_Template, 2, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(72, "div", 47)(73, "div", 48);
-    i0.ɵɵelement(74, "i", 49);
-    i0.ɵɵelementStart(75, "h3");
-    i0.ɵɵtext(76, "Leakage guard");
+    i0.ɵɵelementStart(19, "div", 183)(20, "div", 184);
+    i0.ɵɵelement(21, "i", 185);
+    i0.ɵɵelementStart(22, "h3");
+    i0.ɵɵtext(23, "Leakage guard");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(77, "div", 46)(78, "div", 50)(79, "label");
-    i0.ɵɵtext(80, "Deny-list columns (comma-separated)");
+    i0.ɵɵelementStart(24, "div", 182)(25, "div", 186)(26, "label");
+    i0.ɵɵtext(27, "Deny-list columns (comma-separated)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(81, "input", 51);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Template_input_input_81_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setDeny($event.target.value)); });
+    i0.ɵɵelementStart(28, "input", 187);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_input_input_28_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setDeny(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(82, "div", 50)(83, "label");
-    i0.ɵɵtext(84, "Single-feature dominance threshold");
+    i0.ɵɵelementStart(29, "div", 186)(30, "label");
+    i0.ɵɵtext(31, "Single-feature dominance threshold");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(85, "input", 52);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Template_input_input_85_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setThreshold($event.target.value)); });
+    i0.ɵɵelementStart(32, "input", 188);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_input_input_32_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setThreshold(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(86, "div", 47)(87, "div", 48);
-    i0.ɵɵelement(88, "i", 53);
-    i0.ɵɵelementStart(89, "h3");
-    i0.ɵɵtext(90, "As-of strategy");
+    i0.ɵɵelementStart(33, "div", 183)(34, "div", 184);
+    i0.ɵɵelement(35, "i", 79);
+    i0.ɵɵelementStart(36, "h3");
+    i0.ɵɵtext(37, "As-of strategy");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(91, "div", 46)(92, "div", 50)(93, "label");
-    i0.ɵɵtext(94, "Mode");
+    i0.ɵɵelementStart(38, "div", 182)(39, "div", 186)(40, "label");
+    i0.ɵɵtext(41, "Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(95, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Template_select_change_95_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setAsOfMode($event.target.value)); });
-    i0.ɵɵelementStart(96, "option", 55);
-    i0.ɵɵtext(97, "none");
+    i0.ɵɵelementStart(42, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_select_change_42_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAsOfMode(ctx_r1.inputVal($event))); });
+    i0.ɵɵelementStart(43, "option", 190);
+    i0.ɵɵtext(44, "none");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(98, "option", 56);
-    i0.ɵɵtext(99, "column");
+    i0.ɵɵelementStart(45, "option", 191);
+    i0.ɵɵtext(46, "column");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(100, "option", 57);
-    i0.ɵɵtext(101, "offset");
+    i0.ɵɵelementStart(47, "option", 192);
+    i0.ɵɵtext(48, "offset");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(102, PSPipelinesComponent_Conditional_2_Conditional_102_Template, 4, 1, "div", 50);
-    i0.ɵɵconditionalCreate(103, PSPipelinesComponent_Conditional_2_Conditional_103_Template, 4, 1, "div", 50);
+    i0.ɵɵconditionalCreate(49, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_49_Template, 4, 1, "div", 186);
+    i0.ɵɵconditionalCreate(50, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_50_Template, 4, 1, "div", 186);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(104, "div", 47)(105, "div", 48);
-    i0.ɵɵelement(106, "i", 58);
-    i0.ɵɵelementStart(107, "h3");
-    i0.ɵɵtext(108, "Validation");
+    i0.ɵɵelementStart(51, "div", 183)(52, "div", 184);
+    i0.ɵɵelement(53, "i", 193);
+    i0.ɵɵelementStart(54, "h3");
+    i0.ɵɵtext(55, "Validation");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(109, "div", 46)(110, "div", 50)(111, "label");
-    i0.ɵɵtext(112, "Strategy");
+    i0.ɵɵelementStart(56, "div", 182)(57, "div", 186)(58, "label");
+    i0.ɵɵtext(59, "Strategy");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(113, "select", 54);
-    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Template_select_change_113_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setValStrategy($event.target.value)); });
-    i0.ɵɵelementStart(114, "option", 59);
-    i0.ɵɵtext(115, "train_test_split");
+    i0.ɵɵelementStart(60, "select", 189);
+    i0.ɵɵlistener("change", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_select_change_60_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setValStrategy(ctx_r1.inputVal($event))); });
+    i0.ɵɵelementStart(61, "option", 194);
+    i0.ɵɵtext(62, "train_test_split");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(116, "option", 60);
-    i0.ɵɵtext(117, "kfold");
+    i0.ɵɵelementStart(63, "option", 195);
+    i0.ɵɵtext(64, "kfold");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(118, "option", 61);
-    i0.ɵɵtext(119, "holdout");
+    i0.ɵɵelementStart(65, "option", 196);
+    i0.ɵɵtext(66, "holdout");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(120, PSPipelinesComponent_Conditional_2_Conditional_120_Template, 4, 1, "div", 50);
-    i0.ɵɵconditionalCreate(121, PSPipelinesComponent_Conditional_2_Conditional_121_Template, 4, 1, "div", 50);
-    i0.ɵɵelementStart(122, "div", 50)(123, "label");
-    i0.ɵɵtext(124, "Locked holdout fraction");
+    i0.ɵɵconditionalCreate(67, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_67_Template, 4, 1, "div", 186);
+    i0.ɵɵconditionalCreate(68, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Conditional_68_Template, 4, 1, "div", 186);
+    i0.ɵɵelementStart(69, "div", 186)(70, "label");
+    i0.ɵɵtext(71, "Locked holdout fraction");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(125, "input", 62);
-    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Template_input_input_125_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setHoldout($event.target.value)); });
+    i0.ɵɵelementStart(72, "input", 197);
+    i0.ɵɵlistener("input", function PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template_input_input_72_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setHoldout(ctx_r1.inputVal($event))); });
     i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.pipelines);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", !ctx_r1.dirty || ctx_r1.busy);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("size", ctx_r1.inspectorSizePct)("minSize", 20)("maxSize", 55);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.selectedNode.icon);
+    i0.ɵɵattribute("data-type", ctx_r1.selectedNode.type);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.busy);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedNode.title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.nodeTypeLabel(ctx_r1.selectedNode.type), " \u00B7 selected");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.busy || ctx_r1.dirty);
+    i0.ɵɵconditional(ctx_r1.selectedNode.type === "src" || ctx_r1.selectedNode.type === "feat" || ctx_r1.selectedNode.type === "emb" ? 12 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.selectedSource ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedStep ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedNode.type === "target" ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedNode.type === "algo" ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedNode.type === "output" ? 18 : -1);
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("value", ctx_r1.denyText);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.editLeakage.SingleFeatureDominanceThreshold);
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("value", ctx_r1.editAsOf.Mode);
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.dirty ? 17 : -1);
-    i0.ɵɵadvance(15);
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.nodes.length, " nodes \u00B7 ", ctx_r1.edges.length, " edges");
+    i0.ɵɵconditional(ctx_r1.editAsOf.Mode === "column" ? 49 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.editAsOf.Mode === "offset" ? 50 : -1);
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("value", ctx_r1.editValidation.Strategy);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.editValidation.Strategy === "train_test_split" ? 67 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.editValidation.Strategy === "kfold" ? 68 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.editValidation.LockedHoldoutFraction);
+} }
+function PSPipelinesComponent_Conditional_2_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "as-split", 130);
+    i0.ɵɵlistener("dragEnd", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_as_split_dragEnd_1_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onInspectorSplitDragEnd($event.sizes)); });
+    i0.ɵɵelementStart(2, "as-split-area", 15)(3, "div", 131)(4, "div", 132)(5, "div", 133)(6, "span", 134);
+    i0.ɵɵtext(7, "Add to Graph:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 135);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addSource()); });
+    i0.ɵɵelement(9, "i", 87);
+    i0.ɵɵtext(10, " Source");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 136);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.addStep()); });
+    i0.ɵɵelement(12, "i", 83);
+    i0.ɵɵtext(13, " Feature step");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 137)(15, "div", 138)(16, "button", 139);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.zoomOut()); });
+    i0.ɵɵelement(17, "i", 140);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span", 141);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_span_click_18_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetZoom()); });
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 142);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.zoomIn()); });
+    i0.ɵɵelement(21, "i", 8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "button", 143);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Conditional_42_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleInspector()); });
+    i0.ɵɵelement(23, "i", 144);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "span", 145);
+    i0.ɵɵelement(25, "i", 146);
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(27, "div", 147)(28, "div", 148);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(29, "svg", 149)(30, "defs")(31, "marker", 150);
+    i0.ɵɵelement(32, "path", 151);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "marker", 152);
+    i0.ɵɵelement(34, "path", 153);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(35, PSPipelinesComponent_Conditional_2_Conditional_42_For_36_Template, 1, 4, ":svg:path", 154, _forTrack2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(37, PSPipelinesComponent_Conditional_2_Conditional_42_For_38_Template, 11, 16, "div", 155, _forTrack3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(39, "div", 156)(40, "div", 157)(41, "span");
+    i0.ɵɵelement(42, "i", 158);
+    i0.ɵɵtext(43, " Source");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "span");
+    i0.ɵɵelement(45, "i", 159);
+    i0.ɵɵtext(46, " Feature");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(47, "span");
+    i0.ɵɵelement(48, "i", 160);
+    i0.ɵɵtext(49, " Embedding");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "span");
+    i0.ɵɵelement(51, "i", 161);
+    i0.ɵɵtext(52, " Target");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(53, "span");
+    i0.ɵɵelement(54, "i", 162);
+    i0.ɵɵtext(55, " Algorithm");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(56, "span");
+    i0.ɵɵelement(57, "i", 163);
+    i0.ɵɵtext(58, " Model");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵconditionalCreate(59, PSPipelinesComponent_Conditional_2_Conditional_42_Conditional_59_Template, 73, 22, "as-split-area", 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("gutterSize", 6);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r1.canvasW, "px")("height", ctx_r1.canvasH, "px");
+    i0.ɵɵproperty("size", ctx_r1.isInspectorCollapsed ? 100 : ctx_r1.canvasSizePct)("minSize", 40);
+    i0.ɵɵadvance(14);
+    i0.ɵɵproperty("disabled", ctx_r1.zoomLevel <= 0.5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.Math.round(ctx_r1.zoomLevel * 100), "%");
     i0.ɵɵadvance();
-    i0.ɵɵattribute("width", ctx_r1.canvasW)("height", ctx_r1.canvasH)("viewBox", "0 0 " + ctx_r1.canvasW + " " + ctx_r1.canvasH);
+    i0.ɵɵproperty("disabled", ctx_r1.zoomLevel >= 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", !ctx_r1.isInspectorCollapsed);
+    i0.ɵɵproperty("title", ctx_r1.isInspectorCollapsed ? "Open Inspector" : "Collapse Inspector");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.nodes.length, " nodes \u00B7 ", ctx_r1.edges.length, " edges");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r1.canvasW, "px")("height", ctx_r1.canvasH, "px")("transform", "scale(" + ctx_r1.zoomLevel + ")");
     i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r1.canvasW)("height", ctx_r1.canvasH);
+    i0.ɵɵadvance(6);
     i0.ɵɵrepeater(ctx_r1.edges);
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.nodes);
     i0.ɵɵadvance(22);
-    i0.ɵɵproperty("ngClass", ctx_r1.selectedNode.icon);
-    i0.ɵɵattribute("data-type", ctx_r1.selectedNode.type);
+    i0.ɵɵconditional(!ctx_r1.isInspectorCollapsed ? 59 : -1);
+} }
+function PSPipelinesComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵconditionalCreate(1, PSPipelinesComponent_Conditional_2_Conditional_1_Template, 5, 0, "div", 12);
+    i0.ɵɵelementStart(2, "as-split", 13);
+    i0.ɵɵlistener("dragEnd", function PSPipelinesComponent_Conditional_2_Template_as_split_dragEnd_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSplitDragEnd($event.sizes)); });
+    i0.ɵɵconditionalCreate(3, PSPipelinesComponent_Conditional_2_Conditional_3_Template, 27, 13, "as-split-area", 14);
+    i0.ɵɵelementStart(4, "as-split-area", 15)(5, "div", 16)(6, "div", 17)(7, "div", 18)(8, "div", 19)(9, "span");
+    i0.ɵɵtext(10, "Pipelines");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "i", 20);
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(14, "i", 20);
+    i0.ɵɵelementStart(15, "strong");
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 21)(18, "h1");
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(20, PSPipelinesComponent_Conditional_2_Conditional_20_Template, 3, 4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 22)(22, "button", 23);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    i0.ɵɵelement(23, "i", 24);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "button", 25);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cloneSelected()); });
+    i0.ɵɵelement(26, "i", 26);
+    i0.ɵɵtext(27, " Clone ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "button", 27);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.save()); });
+    i0.ɵɵelement(29, "i", 28);
+    i0.ɵɵtext(30, " Save ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "button", 29);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_31_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.validate()); });
+    i0.ɵɵelement(32, "i", 30);
+    i0.ɵɵtext(33, " Validate ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "button", 31);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.train()); });
+    i0.ɵɵelement(35, "i", 32);
+    i0.ɵɵtext(36, " Train ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "button", 33);
+    i0.ɵɵlistener("click", function PSPipelinesComponent_Conditional_2_Template_button_click_37_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refine()); });
+    i0.ɵɵelement(38, "i", 34);
+    i0.ɵɵtext(39, " Agent ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(40, PSPipelinesComponent_Conditional_2_Conditional_40_Template, 3, 0, "span", 35);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(41, PSPipelinesComponent_Conditional_2_Conditional_41_Template, 182, 18, "div", 36);
+    i0.ɵɵconditionalCreate(42, PSPipelinesComponent_Conditional_2_Conditional_42_Template, 60, 20, "div", 37);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("catalog-collapsed", ctx_r1.isCatalogCollapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isCatalogCollapsed ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("gutterSize", 6);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isCatalogCollapsed ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r1.isCatalogCollapsed ? 100 : ctx_r1.workspaceSizePct)("minSize", 40);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.pipelineDomain(ctx_r1.selectedPipeline));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.selectedNode.title);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.nodeTypeLabel(ctx_r1.selectedNode.type), " \u00B7 selected");
+    i0.ɵɵtextInterpolate(ctx_r1.selectedPipeline == null ? null : ctx_r1.selectedPipeline.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedPipeline == null ? null : ctx_r1.selectedPipeline.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedNode.type === "src" || ctx_r1.selectedNode.type === "feat" || ctx_r1.selectedNode.type === "emb" ? 65 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedPipeline ? 20 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.selectedSource ? 67 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedStep ? 68 : -1);
+    i0.ɵɵproperty("title", ctx_r1.isGraphView ? "Switch to 5-Stage Progressive Flow" : "Switch to Pipeline Graph View");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedNode.type === "target" ? 69 : -1);
+    i0.ɵɵclassProp("fa-diagram-project", !ctx_r1.isGraphView)("fa-layer-group", ctx_r1.isGraphView);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedNode.type === "algo" ? 70 : -1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isGraphView ? "Stages View" : "Graph View", " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedNode.type === "output" ? 71 : -1);
-    i0.ɵɵadvance(10);
-    i0.ɵɵproperty("value", ctx_r1.denyText);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.editLeakage.SingleFeatureDominanceThreshold);
-    i0.ɵɵadvance(10);
-    i0.ɵɵproperty("value", ctx_r1.editAsOf.Mode);
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.editAsOf.Mode === "column" ? 102 : -1);
+    i0.ɵɵproperty("disabled", !ctx_r1.selectedPipeline);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", !ctx_r1.dirty || ctx_r1.busy);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.busy);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.busy || ctx_r1.dirty);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.dirty ? 40 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.editAsOf.Mode === "offset" ? 103 : -1);
-    i0.ɵɵadvance(10);
-    i0.ɵɵproperty("value", ctx_r1.editValidation.Strategy);
-    i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.editValidation.Strategy === "train_test_split" ? 120 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "stages" ? 41 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.editValidation.Strategy === "kfold" ? 121 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.editValidation.LockedHoldoutFraction);
+    i0.ɵɵconditional(ctx_r1.isGraphView ? 42 : -1);
+} }
+function PSPipelinesComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r56 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ps-pipeline-wizard", 217);
+    i0.ɵɵlistener("saved", function PSPipelinesComponent_Conditional_3_Template_ps_pipeline_wizard_saved_0_listener($event) { i0.ɵɵrestoreView(_r56); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onWizardSaved($event)); })("trainRequested", function PSPipelinesComponent_Conditional_3_Template_ps_pipeline_wizard_trainRequested_0_listener($event) { i0.ɵɵrestoreView(_r56); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onWizardTrainRequested($event)); })("closed", function PSPipelinesComponent_Conditional_3_Template_ps_pipeline_wizard_closed_0_listener() { i0.ɵɵrestoreView(_r56); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeWizard()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("engine", ctx_r1.engine)("provider", ctx_r1.provider)("currentUser", ctx_r1.currentUser)("cloneFrom", ctx_r1.wizardClonePipeline)("initialAlgorithmId", ctx_r1.initialWizardAlgorithmId);
 } }
-const NODE_W = 190;
-const NODE_H = 86;
-const COL_GAP = 86;
-const ROW_GAP = 30;
-const PAD_X = 28;
-const PAD_Y = 28;
+const NODE_W = 230;
+const NODE_H = 96;
+const COL_GAP = 96;
+const ROW_GAP = 28;
+const PAD_X = 40;
+const PAD_Y = 40;
 const SOURCE_KINDS = ['Entity', 'Query', 'ExternalEntity', 'VectorSet', 'FeaturePipeline'];
 const STEP_KINDS = ['select', 'impute', 'standardize', 'onehot', 'bin', 'embedding', 'llm-derived', 'flow-agent', 'vision-llm'];
 const PROBLEM_TYPES = ['classification', 'regression'];
@@ -790,23 +1604,21 @@ const STEP_ICONS = {
 };
 const PS_PIPELINES_STARTER_PROMPT = 'Help me build a training pipeline. I will tell you what I want to predict and on which entity; ' +
     'you assemble the features (guarding against leakage), pick an algorithm, and train a versioned model.';
-/**
- * Training Pipelines panel — a LIVE, **editable** visual DAG builder over `MJ: ML Training Pipelines`.
- * The whole graph is persisted as JSON (`SourceBindings` + `FeatureSteps` + `AlgorithmID` +
- * `TargetVariable` + `AsOfStrategy`/`LeakageGuard`/`ValidationStrategy`), so the editor reads/writes the
- * REAL spec. The parsed spec is the editable state; nodes/edges are derived from it for rendering, so an
- * edit → re-derive → re-layout. Save serializes back to the entity; Train runs the pipeline. Editing is
- * inspector-driven (explicit controls, no fiddly port-dragging) — better for a structured, persisted DAG.
- * Fully entity-agnostic — every node derives from the pipeline's own refs. See
- * plans/predictive-studio-pipeline-builder.md.
- */
 export class PSPipelinesComponent {
     engine;
     provider = null;
     currentUser = null;
     askAgent = new EventEmitter();
+    navigate = new EventEmitter();
     cdr = inject(ChangeDetectorRef);
     notifications = inject(MJNotificationService);
+    navigationService = inject(NavigationService);
+    isCatalogCollapsed = false;
+    catalogSizePct = 28;
+    workspaceSizePct = 72;
+    isInspectorCollapsed = false;
+    canvasSizePct = 72;
+    inspectorSizePct = 28;
     starterPrompt = PS_PIPELINES_STARTER_PROMPT;
     sourceKinds = SOURCE_KINDS;
     stepKinds = STEP_KINDS;
@@ -814,6 +1626,47 @@ export class PSPipelinesComponent {
     imputeStrategies = IMPUTE_STRATEGIES;
     pipelines = [];
     selectedPipelineId = '';
+    showWizard = false;
+    wizardClonePipeline = null;
+    initialWizardAlgorithmId;
+    viewMode = 'stages';
+    searchQuery = '';
+    activeFilter = 'all';
+    NODE_W = NODE_W;
+    NODE_H = NODE_H;
+    Math = Math;
+    zoomLevel = 1;
+    openWizard(algoId) {
+        this.wizardClonePipeline = null;
+        this.initialWizardAlgorithmId = algoId;
+        this.showWizard = true;
+    }
+    cloneSelected() {
+        if (!this.selectedPipeline)
+            return;
+        this.wizardClonePipeline = this.selectedPipeline;
+        this.initialWizardAlgorithmId = undefined;
+        this.showWizard = true;
+    }
+    closeWizard() {
+        this.showWizard = false;
+        this.wizardClonePipeline = null;
+        this.initialWizardAlgorithmId = undefined;
+    }
+    async onWizardSaved(pipeline) {
+        this.closeWizard();
+        await this.engine.Config(true, this.currentUser ?? undefined, this.provider ?? undefined);
+        this.pipelines = this.engine.Pipelines;
+        this.selectPipeline(pipeline.ID);
+        this.cdr.detectChanges();
+    }
+    async onWizardTrainRequested(pipeline) {
+        this.closeWizard();
+        await this.engine.Config(true, this.currentUser ?? undefined, this.provider ?? undefined);
+        this.pipelines = this.engine.Pipelines;
+        this.selectPipeline(pipeline.ID);
+        await this.train();
+    }
     // Editable spec state (the source of truth; nodes/edges are derived).
     editSources = [];
     editSteps = [];
@@ -833,21 +1686,284 @@ export class PSPipelinesComponent {
     busy = false;
     nodeById = new Map();
     stepSeq = 0;
+    ngOnChanges(_changes) {
+        this.refreshFromEngine();
+    }
     ngOnInit() {
+        const saved = UserInfoEngine.Instance.GetSetting('mj.predictiveStudio.pipelines.layout');
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                if (typeof parsed.catalogSizePct === 'number' && parsed.catalogSizePct >= 15 && parsed.catalogSizePct <= 60) {
+                    this.catalogSizePct = parsed.catalogSizePct;
+                    this.workspaceSizePct = 100 - this.catalogSizePct;
+                }
+                if (typeof parsed.isCatalogCollapsed === 'boolean') {
+                    this.isCatalogCollapsed = parsed.isCatalogCollapsed;
+                }
+                if (typeof parsed.canvasSizePct === 'number' && parsed.canvasSizePct >= 40 && parsed.canvasSizePct <= 85) {
+                    this.canvasSizePct = parsed.canvasSizePct;
+                    this.inspectorSizePct = 100 - this.canvasSizePct;
+                }
+                if (typeof parsed.isInspectorCollapsed === 'boolean') {
+                    this.isInspectorCollapsed = parsed.isInspectorCollapsed;
+                }
+            }
+            catch { }
+        }
+        this.refreshFromEngine();
+    }
+    onSplitDragEnd(sizes) {
+        if (Array.isArray(sizes) && sizes.length === 2 && typeof sizes[0] === 'number' && typeof sizes[1] === 'number') {
+            this.catalogSizePct = Math.round(sizes[0]);
+            this.workspaceSizePct = Math.round(sizes[1]);
+            this.saveLayoutPrefs();
+        }
+    }
+    toggleCatalog() {
+        this.isCatalogCollapsed = !this.isCatalogCollapsed;
+        this.saveLayoutPrefs();
+        this.cdr.markForCheck();
+    }
+    onInspectorSplitDragEnd(sizes) {
+        if (Array.isArray(sizes) && sizes.length === 2 && typeof sizes[0] === 'number' && typeof sizes[1] === 'number') {
+            this.canvasSizePct = Math.round(sizes[0]);
+            this.inspectorSizePct = Math.round(sizes[1]);
+            this.saveLayoutPrefs();
+        }
+    }
+    toggleInspector() {
+        this.isInspectorCollapsed = !this.isInspectorCollapsed;
+        this.saveLayoutPrefs();
+        this.cdr.markForCheck();
+    }
+    saveLayoutPrefs() {
+        const prefs = {
+            catalogSizePct: this.catalogSizePct,
+            isCatalogCollapsed: this.isCatalogCollapsed,
+            canvasSizePct: this.canvasSizePct,
+            inspectorSizePct: this.inspectorSizePct,
+            isInspectorCollapsed: this.isInspectorCollapsed,
+        };
+        UserInfoEngine.Instance.SetSettingDebounced('mj.predictiveStudio.pipelines.layout', JSON.stringify(prefs));
+    }
+    openModelRecord(modelId) {
+        if (!modelId)
+            return;
+        try {
+            const p = this.provider ?? new Metadata();
+            if (!p)
+                return;
+            const entity = p.EntityByName('MJ: ML Models');
+            if (!entity)
+                return;
+            const ck = CompositeKey.FromURLSegment(entity, modelId);
+            this.navigationService.OpenEntityRecord('MJ: ML Models', ck);
+        }
+        catch (err) {
+            this.notifications.CreateSimpleNotification(`Could not open model: ${err instanceof Error ? err.message : String(err)}`, 'error');
+        }
+    }
+    viewTrainingRuns(modelId) {
+        if (this.navigate.observed) {
+            this.navigate.emit('experiments');
+            return;
+        }
+        try {
+            const p = this.provider ?? new Metadata();
+            if (!p)
+                return;
+            const runs = this.engine?.TrainingRuns ?? [];
+            const match = modelId
+                ? runs.find((r) => UUIDsEqual(r.ResultingModelID, modelId))
+                : runs.find((r) => this.selectedPipelineId && UUIDsEqual(r.PipelineID, this.selectedPipelineId));
+            if (match) {
+                const entity = p.EntityByName('MJ: ML Training Runs');
+                if (entity) {
+                    const ck = CompositeKey.FromURLSegment(entity, match.ID);
+                    this.navigationService.OpenEntityRecord('MJ: ML Training Runs', ck);
+                    return;
+                }
+            }
+            this.navigationService.OpenNavItemByName('Experiments');
+        }
+        catch (err) {
+            this.notifications.CreateSimpleNotification(`Could not open training runs: ${err instanceof Error ? err.message : String(err)}`, 'error');
+        }
+    }
+    refreshFromEngine() {
         this.pipelines = this.engine?.Pipelines ?? [];
-        if (this.pipelines.length > 0) {
+        if (!this.selectedPipelineId && this.pipelines.length > 0) {
             this.selectPipeline(this.pipelines[0].ID);
         }
+        else if (this.selectedPipelineId && !this.pipelines.some((p) => UUIDsEqual(p.ID, this.selectedPipelineId))) {
+            if (this.pipelines.length > 0) {
+                this.selectPipeline(this.pipelines[0].ID);
+            }
+        }
+    }
+    get isGraphView() {
+        return this.viewMode === 'graph' || this.viewMode === 'dag';
+    }
+    toggleViewMode() {
+        this.viewMode = this.isGraphView ? 'stages' : 'graph';
+    }
+    zoomIn() {
+        this.zoomLevel = Math.min(2.0, Math.round((this.zoomLevel + 0.15) * 100) / 100);
+    }
+    zoomOut() {
+        this.zoomLevel = Math.max(0.5, Math.round((this.zoomLevel - 0.15) * 100) / 100);
+    }
+    resetZoom() {
+        this.zoomLevel = 1;
+    }
+    inputVal(e) {
+        return e.target.value;
+    }
+    isEdgeActive(edge) {
+        return this.selectedId === edge.from || this.selectedId === edge.to;
+    }
+    setFilter(f) {
+        this.activeFilter = f;
+    }
+    onSearchInput(ev) {
+        this.searchQuery = (ev.target?.value ?? '').toLowerCase();
+    }
+    get filteredPipelines() {
+        return (this.pipelines ?? []).filter((p) => {
+            if (this.searchQuery) {
+                const nameMatch = p.Name?.toLowerCase().includes(this.searchQuery);
+                const entityMatch = p.TargetEntity?.toLowerCase().includes(this.searchQuery);
+                const targetMatch = p.TargetVariable?.toLowerCase().includes(this.searchQuery);
+                if (!nameMatch && !entityMatch && !targetMatch)
+                    return false;
+            }
+            if (this.activeFilter === 'published')
+                return p.Status === 'Published';
+            if (this.activeFilter === 'draft')
+                return p.Status === 'Draft';
+            if (this.activeFilter === 'core')
+                return p.TargetEntity?.includes('AI') || p.Name?.includes('AI Agent');
+            return true;
+        });
+    }
+    pipelineDomain(p) {
+        if (!p)
+            return 'Platform';
+        const n = (p.Name || '') + (p.TargetEntity || '');
+        if (n.includes('MoreCheese') || n.includes('Membership') || n.includes('Event') || n.includes('Course'))
+            return 'More Cheese Club';
+        if (n.includes('AI') || n.includes('Prompt') || n.includes('Agent'))
+            return 'MemberJunction Platform';
+        return 'BizApps';
+    }
+    targetEntityName(p) {
+        if (!p)
+            return 'Entity';
+        return p.TargetEntity || this.editSources[0]?.Ref || 'Entity';
+    }
+    get pipelineModels() {
+        if (!this.selectedPipelineId || !this.engine?.Models)
+            return [];
+        return this.engine.Models.filter((m) => UUIDsEqual(m.PipelineID, this.selectedPipelineId));
+    }
+    get publishedModel() {
+        return this.pipelineModels.find((m) => m.Status === 'Published') ?? this.pipelineModels[0];
+    }
+    selectedModelVersionId = null;
+    get inspectedModel() {
+        if (this.selectedModelVersionId) {
+            const found = this.pipelineModels.find((m) => UUIDsEqual(m.ID, this.selectedModelVersionId));
+            if (found)
+                return found;
+        }
+        return this.publishedModel;
+    }
+    selectModelVersion(id) {
+        this.selectedModelVersionId = id;
+        this.cdr.markForCheck();
+    }
+    bestMetricForPipeline(p) {
+        if (!p || !this.engine?.Models)
+            return null;
+        const models = this.engine.Models.filter((m) => UUIDsEqual(m.PipelineID, p.ID));
+        if (models.length === 0)
+            return null;
+        const best = models.find((m) => m.Status === 'Published') ?? models[0];
+        return this.formatHoldout(best);
+    }
+    selectStep(id) {
+        this.selectNode(id);
+    }
+    getStepColumns(step) {
+        switch (step.Kind) {
+            case 'select':
+            case 'standardize':
+                return step.Columns ?? [];
+            case 'impute':
+            case 'onehot':
+            case 'bin':
+                return step.Column ? [step.Column] : [];
+            default:
+                return [];
+        }
+    }
+    getStepInputs(step) {
+        return step.Inputs ?? [];
+    }
+    formatHoldout(m) {
+        if (!m.HoldoutMetrics)
+            return m.Metrics ? 'Trained' : 'Pending';
+        try {
+            const hm = typeof m.HoldoutMetrics === 'string' ? JSON.parse(m.HoldoutMetrics) : m.HoldoutMetrics;
+            if (hm.auc != null)
+                return `AUC ${(Number(hm.auc)).toFixed(3)}`;
+            if (hm.r2 != null)
+                return `R² ${(Number(hm.r2)).toFixed(3)}`;
+            if (hm.rmse != null)
+                return `RMSE ${(Number(hm.rmse)).toFixed(2)}`;
+            if (hm.accuracy != null)
+                return `Acc ${(Number(hm.accuracy) * 100).toFixed(1)}%`;
+            return 'Scored';
+        }
+        catch {
+            return 'Scored';
+        }
+    }
+    get asOfLabel() {
+        if (this.editAsOf.Mode === 'column')
+            return `Column: ${this.editAsOf.Column || 'DecisionDate'}`;
+        if (this.editAsOf.Mode === 'offset')
+            return `Offset: ${this.editAsOf.OffsetDays || 0}d prior`;
+        return 'None (Static snapshot)';
+    }
+    get selectedAlgorithmName() {
+        return this.engine?.AlgorithmName(this.editAlgorithmId) || 'Auto-select (Tournament)';
     }
-    // ---- pipeline selection: entity JSON → editable state ----
     selectPipeline(id) {
         this.selectedPipelineId = id;
+        this.selectedModelVersionId = null;
         const p = this.pipelines.find((x) => UUIDsEqual(x.ID, id));
         if (!p) {
             return;
         }
-        this.editSources = this.parse(p.SourceBindings, []);
-        this.editSteps = this.parse(p.FeatureSteps, { Steps: [] }).Steps ?? [];
+        // Defensive parsing against non-array JSON schemas
+        const rawSources = this.parse(p.SourceBindings, []);
+        this.editSources = Array.isArray(rawSources)
+            ? rawSources
+            : rawSources && typeof rawSources === 'object'
+                ? [{ Kind: 'Entity', Ref: rawSources.EntityID || '' }]
+                : [];
+        const rawSteps = this.parse(p.FeatureSteps, { Steps: [] });
+        if (Array.isArray(rawSteps)) {
+            this.editSteps = rawSteps;
+        }
+        else if (rawSteps && typeof rawSteps === 'object' && 'Steps' in rawSteps && Array.isArray(rawSteps.Steps)) {
+            this.editSteps = rawSteps.Steps;
+        }
+        else {
+            this.editSteps = [];
+        }
         this.editTargetVariable = p.TargetVariable ?? '';
         this.editProblemType = p.ProblemType ?? 'classification';
         this.editAlgorithmId = p.AlgorithmID ?? '';
@@ -890,8 +2006,32 @@ export class PSPipelinesComponent {
         this.editSteps.forEach((step) => nodes.push(this.stepNode(step)));
         nodes.push(this.targetNode());
         nodes.push(this.algoNode());
-        nodes.push({ id: '__output', type: 'output', title: 'Model', icon: 'fa-solid fa-cube', x: 0, y: 0, hasIn: false, hasOut: false, rows: [{ k: 'status', v: this.selectedPipeline?.Status ?? 'Draft' }] });
+        nodes.push({
+            id: '__output',
+            type: 'output',
+            title: 'Model Artifact',
+            icon: 'fa-solid fa-cube',
+            tag: this.selectedPipeline?.Status ?? 'Draft',
+            x: 0,
+            y: 0,
+            hasIn: true,
+            hasOut: false,
+            rows: [
+                { k: 'status', v: this.selectedPipeline?.Status ?? 'Draft' },
+                { k: 'serving', v: this.selectedPipeline?.Status === 'Published' ? 'Active' : 'Not Serving' }
+            ]
+        });
         const stepIds = new Set(this.editSteps.map((s) => s.Id));
+        const sourceKeyToId = new Map();
+        this.editSources.forEach((sb, i) => {
+            const sid = `src:${i}`;
+            sourceKeyToId.set(sid.toLowerCase(), sid);
+            if (sb.Ref)
+                sourceKeyToId.set(sb.Ref.toLowerCase(), sid);
+            if (sb.Alias)
+                sourceKeyToId.set(sb.Alias.toLowerCase(), sid);
+        });
+        const stepSourcesConnected = new Set();
         const referenced = new Set();
         for (const step of this.editSteps) {
             for (const input of step.Inputs ?? []) {
@@ -899,9 +2039,20 @@ export class PSPipelinesComponent {
                     edges.push({ from: input, to: step.Id });
                     referenced.add(input);
                 }
+                else {
+                    const matchedSrc = sourceKeyToId.get(input.toLowerCase());
+                    if (matchedSrc) {
+                        edges.push({ from: matchedSrc, to: step.Id });
+                        stepSourcesConnected.add(step.Id);
+                    }
+                }
             }
         }
-        const roots = this.editSteps.filter((s) => (s.Inputs ?? []).filter((i) => stepIds.has(i)).length === 0);
+        const roots = this.editSteps.filter((s) => {
+            const hasStepInput = (s.Inputs ?? []).some((i) => stepIds.has(i));
+            const hasSourceInput = stepSourcesConnected.has(s.Id);
+            return !hasStepInput && !hasSourceInput;
+        });
         const sourceIds = this.editSources.map((_s, i) => `src:${i}`);
         if (this.editSteps.length > 0) {
             for (const sid of sourceIds) {
@@ -918,28 +2069,74 @@ export class PSPipelinesComponent {
         for (const t of this.editSteps.filter((s) => !referenced.has(s.Id))) {
             edges.push({ from: t.Id, to: '__algo' });
         }
+        // Connect source to target so target sits cleanly in the feature/target layer
+        if (sourceIds.length > 0) {
+            edges.push({ from: sourceIds[0], to: '__target' });
+        }
         edges.push({ from: '__target', to: '__algo' });
         edges.push({ from: '__algo', to: '__output' });
         this.nodes = nodes;
         this.edges = edges;
         this.markPorts();
-        this.layoutDag();
+        this.layoutGraph();
     }
     sourceNode(sb, i) {
-        const rows = [{ k: 'kind', v: sb.Kind }, { k: 'ref', v: sb.Ref || '—' }];
+        const md = this.provider ?? new Metadata();
+        let title = sb.Alias;
+        if (!title && sb.Kind === 'Entity' && sb.Ref) {
+            const entity = md.EntityByName(sb.Ref);
+            title = entity?.DisplayName || entity?.Name;
+        }
+        title = title || sb.Ref || 'source';
+        const rows = [{ k: 'kind', v: sb.Kind }];
         if (sb.Alias) {
             rows.push({ k: 'alias', v: sb.Alias });
         }
-        return { id: `src:${i}`, type: 'src', title: sb.Alias || sb.Ref || 'source', icon: SOURCE_ICONS[sb.Kind] ?? 'fa-solid fa-database', tag: sb.Kind, rows, x: 0, y: 0, hasIn: false, hasOut: true };
+        if (sb.Kind === 'Entity' && title !== sb.Ref) {
+            rows.push({ k: 'entity', v: sb.Ref });
+        }
+        return {
+            id: `src:${i}`,
+            type: 'src',
+            title,
+            icon: SOURCE_ICONS[sb.Kind] ?? 'fa-solid fa-database',
+            tag: sb.Kind,
+            rows,
+            x: 0,
+            y: 0,
+            hasIn: false,
+            hasOut: true
+        };
     }
     stepNode(step) {
-        return { id: step.Id, type: step.Kind === 'embedding' ? 'emb' : 'feat', title: step.Label || step.Kind, icon: STEP_ICONS[step.Kind] ?? 'fa-solid fa-sliders', tag: step.Kind, rows: this.stepRows(step), x: 0, y: 0, hasIn: true, hasOut: true };
+        return {
+            id: step.Id,
+            type: step.Kind === 'embedding' ? 'emb' : 'feat',
+            title: step.Label || step.Kind,
+            icon: STEP_ICONS[step.Kind] ?? 'fa-solid fa-sliders',
+            tag: step.Kind,
+            rows: this.stepRows(step),
+            x: 0,
+            y: 0,
+            hasIn: true,
+            hasOut: true
+        };
     }
     stepRows(step) {
         switch (step.Kind) {
-            case 'select': return [{ k: 'columns', v: `${step.Columns.length} cols` }];
+            case 'select': {
+                const preview = step.Columns.length <= 3
+                    ? step.Columns.join(', ')
+                    : `${step.Columns.slice(0, 2).join(', ')} +${step.Columns.length - 2} more`;
+                return [{ k: 'columns', v: preview || '0 cols' }];
+            }
             case 'impute': return [{ k: 'column', v: step.Column }, { k: 'strategy', v: step.Strategy }];
-            case 'standardize': return [{ k: 'columns', v: `${step.Columns.length} cols` }, { k: 'scaler', v: 'z-score' }];
+            case 'standardize': {
+                const preview = step.Columns.length <= 3
+                    ? step.Columns.join(', ')
+                    : `${step.Columns.slice(0, 2).join(', ')} +${step.Columns.length - 2} more`;
+                return [{ k: 'columns', v: preview || '0 cols' }, { k: 'scaler', v: 'z-score' }];
+            }
             case 'onehot': return [{ k: 'column', v: step.Column }];
             case 'bin': return [{ k: 'column', v: step.Column }, { k: 'bins', v: String(step.Bins) }];
             case 'embedding': return [{ k: 'entity', v: step.Entity }, { k: 'dims', v: String(step.Dims) }];
@@ -950,14 +2147,39 @@ export class PSPipelinesComponent {
         }
     }
     targetNode() {
-        return { id: '__target', type: 'target', title: `Target: ${this.editTargetVariable || '—'}`, icon: 'fa-solid fa-bullseye', rows: [{ k: 'variable', v: this.editTargetVariable || '—' }, { k: 'type', v: this.editProblemType }], x: 0, y: 0, hasIn: false, hasOut: true };
+        return {
+            id: '__target',
+            type: 'target',
+            title: `Target: ${this.editTargetVariable || '—'}`,
+            icon: 'fa-solid fa-bullseye',
+            tag: this.editProblemType,
+            rows: [
+                { k: 'variable', v: this.editTargetVariable || '—' },
+                { k: 'type', v: this.editProblemType }
+            ],
+            x: 0,
+            y: 0,
+            hasIn: true,
+            hasOut: true
+        };
     }
     algoNode() {
-        const name = this.engine.AlgorithmName(this.editAlgorithmId);
+        const name = this.engine?.AlgorithmName(this.editAlgorithmId) || 'Algorithm';
         const rows = [{ k: 'algorithm', v: name }];
         const hp = this.parse(this.editHyperparams, {});
-        Object.entries(hp).slice(0, 2).forEach(([k, v]) => rows.push({ k, v: String(v) }));
-        return { id: '__algo', type: 'algo', title: name, icon: 'fa-solid fa-shapes', rows, x: 0, y: 0, hasIn: true, hasOut: true };
+        Object.entries(hp).slice(0, 1).forEach(([k, v]) => rows.push({ k, v: String(v) }));
+        return {
+            id: '__algo',
+            type: 'algo',
+            title: name,
+            icon: 'fa-solid fa-shapes',
+            tag: 'Algorithm',
+            rows,
+            x: 0,
+            y: 0,
+            hasIn: true,
+            hasOut: true
+        };
     }
     markPorts() {
         const hasIn = new Set(this.edges.map((e) => e.to));
@@ -1018,7 +2240,6 @@ export class PSPipelinesComponent {
             this.markDirty();
         }
     }
-    /** Read an arbitrary field off the selected step for display (narrowed by template @switch). */
     stepField(field) {
         const s = this.selectedStep;
         const v = s?.[field];
@@ -1043,7 +2264,6 @@ export class PSPipelinesComponent {
         s.Label = label || undefined;
         this.markDirty();
     } }
-    /** Change a step's Kind, resetting its config to that Kind's defaults (preserving Id/Label/Inputs). */
     setStepKind(kind) {
         const idx = this.editSteps.findIndex((s) => s.Id === this.selectedId);
         if (idx < 0) {
@@ -1056,7 +2276,6 @@ export class PSPipelinesComponent {
     hasInput(stepId) {
         return (this.selectedStep?.Inputs ?? []).includes(stepId);
     }
-    /** Toggle an upstream step input, preventing cycles. */
     toggleInput(stepId) {
         const s = this.selectedStep;
         if (!s) {
@@ -1075,7 +2294,6 @@ export class PSPipelinesComponent {
         }
         this.markDirty();
     }
-    /** True if making `target` depend on `from` would create a cycle (from is downstream of target). */
     createsCycle(from, target) {
         const byId = new Map(this.editSteps.map((s) => [s.Id, s]));
         const seen = new Set();
@@ -1100,12 +2318,6 @@ export class PSPipelinesComponent {
     setHyperparams(v) { this.editHyperparams = v; this.markDirty(); }
     // ---- leakage / as-of / validation editing ----
     get denyText() { return this.editLeakage.DenyFields.join(', '); }
-    /**
-     * Parse the deny-field input. Uses the shared `parseDenyList` so a pasted
-     * bracketed list ("[CheckInTime, Status]") yields clean column names rather than
-     * "[CheckInTime" / "Status]" — entries which match no column and therefore leave
-     * the most dangerous columns silently unguarded. The server re-validates on save.
-     */
     setDeny(text) { this.editLeakage.DenyFields = parseDenyList(text); this.dirty = true; }
     setThreshold(v) { const n = Number(v); if (!Number.isNaN(n)) {
         this.editLeakage.SingleFeatureDominanceThreshold = n;
@@ -1153,7 +2365,6 @@ export class PSPipelinesComponent {
         const step = this.selectedStep;
         if (step) {
             this.editSteps = this.editSteps.filter((s) => s.Id !== step.Id);
-            // Drop the deleted id from any downstream Inputs.
             for (const s of this.editSteps) {
                 if (s.Inputs?.includes(step.Id)) {
                     s.Inputs = s.Inputs.filter((i) => i !== step.Id);
@@ -1172,13 +2383,12 @@ export class PSPipelinesComponent {
             case 'onehot': return { ...base, Kind: 'onehot', Column: '' };
             case 'bin': return { ...base, Kind: 'bin', Column: '', Bins: 5 };
             case 'embedding': return { ...base, Kind: 'embedding', Entity: '', EmbeddingModelRef: '', Dims: 384 };
-            case 'llm-derived': return { ...base, Kind: 'llm-derived', FeaturePipelineRef: '' };
+            case 'llm-derived': return { ...base, Kind: 'llm-derived', FeaturePipelineRef: '', Columns: [] };
             case 'flow-agent': return { ...base, Kind: 'flow-agent', FlowAgentRef: '', InputMapping: {}, OutputMapping: {} };
             case 'vision-llm': return { ...base, Kind: 'vision-llm', ImageColumn: '', Prompt: { InlinePrompt: '' }, Output: { FeatureName: '', Kind: 'category' } };
         }
     }
     // ---- save / validate / train ----
-    /** Serialize the editable state back onto the pipeline entity and Save(). */
     async save() {
         const p = this.selectedPipeline;
         if (!p || this.busy) {
@@ -1209,7 +2419,6 @@ export class PSPipelinesComponent {
             this.cdr.detectChanges();
         }
     }
-    /** Client-side spec sanity check before training. */
     validate() {
         const issues = [];
         if (this.editSources.length === 0) {
@@ -1234,7 +2443,6 @@ export class PSPipelinesComponent {
             this.notifications.CreateSimpleNotification('Pipeline looks valid — ready to train.', 'success', 3000);
         }
     }
-    /** Run the pipeline via the Train Remote Op, then refresh the engine. */
     async train() {
         const p = this.selectedPipeline;
         if (!p || this.busy || this.dirty) {
@@ -1273,78 +2481,94 @@ export class PSPipelinesComponent {
     }
     statusClass(status) {
         switch (status) {
-            case 'Active': return 'green';
-            case 'Draft': return 'amber';
-            case 'Disabled': return 'gray';
-            default: return 'gray';
+            case 'Published': return 'published';
+            case 'Validated': return 'validated';
+            default: return 'draft';
         }
     }
     nodeTypeLabel(type) {
         switch (type) {
             case 'src': return 'Source';
-            case 'feat': return 'Feature step';
+            case 'feat': return 'Feature Step';
             case 'emb': return 'Embedding';
             case 'target': return 'Target';
             case 'algo': return 'Algorithm';
-            case 'output': return 'Model output';
+            case 'output': return 'Output Model';
         }
     }
-    // ---- layered layout (deterministic, topology-driven) ----
-    layoutDag() {
-        this.nodeById = new Map(this.nodes.map((n) => [n.id, n]));
-        const incoming = new Map();
-        const outgoing = new Map();
+    // ---- Graph layered layout ----
+    layoutGraph() {
+        this.nodeById.clear();
+        for (const n of this.nodes) {
+            this.nodeById.set(n.id, n);
+        }
+        const inEdges = new Map();
         for (const n of this.nodes) {
-            incoming.set(n.id, []);
-            outgoing.set(n.id, []);
+            inEdges.set(n.id, []);
         }
         for (const e of this.edges) {
-            if (this.nodeById.has(e.from) && this.nodeById.has(e.to)) {
-                outgoing.get(e.from).push(e.to);
-                incoming.get(e.to).push(e.from);
+            inEdges.get(e.to)?.push(e.from);
+        }
+        const layerOf = new Map();
+        const computeLayer = (id, path) => {
+            if (layerOf.has(id)) {
+                return layerOf.get(id);
+            }
+            if (path.has(id)) {
+                return 0;
             }
+            path.add(id);
+            const preds = inEdges.get(id) ?? [];
+            let l = 0;
+            for (const p of preds) {
+                l = Math.max(l, computeLayer(p, path) + 1);
+            }
+            path.delete(id);
+            layerOf.set(id, l);
+            return l;
+        };
+        for (const n of this.nodes) {
+            computeLayer(n.id, new Set());
         }
-        const depth = this.computeLayers(incoming, outgoing);
-        const maxDepth = Math.max(0, ...depth.values());
-        const columns = Array.from({ length: maxDepth + 1 }, () => []);
+        const algoNode = this.nodes.find((n) => n.id === '__algo');
+        const outNode = this.nodes.find((n) => n.id === '__output');
+        let maxFeatureLayer = 0;
         for (const n of this.nodes) {
-            columns[depth.get(n.id) ?? 0].push(n);
-        }
-        this.positionColumns(columns);
-    }
-    computeLayers(incoming, outgoing) {
-        const depth = new Map(this.nodes.map((n) => [n.id, 0]));
-        const indeg = new Map(this.nodes.map((n) => [n.id, incoming.get(n.id).length]));
-        const queue = this.nodes.filter((n) => indeg.get(n.id) === 0).map((n) => n.id);
-        while (queue.length) {
-            const id = queue.shift();
-            const d = depth.get(id);
-            for (const next of outgoing.get(id)) {
-                depth.set(next, Math.max(depth.get(next), d + 1));
-                indeg.set(next, indeg.get(next) - 1);
-                if (indeg.get(next) === 0) {
-                    queue.push(next);
-                }
+            if (n.id !== '__algo' && n.id !== '__output') {
+                maxFeatureLayer = Math.max(maxFeatureLayer, layerOf.get(n.id) ?? 0);
             }
         }
-        return depth;
-    }
-    positionColumns(columns) {
-        const colStep = NODE_W + COL_GAP;
-        const rowStep = NODE_H + ROW_GAP;
-        const tallest = Math.max(1, ...columns.map((c) => c.length));
-        const contentH = tallest * NODE_H + (tallest - 1) * ROW_GAP;
-        columns.forEach((col, ci) => {
-            const x = PAD_X + ci * colStep;
-            const colH = col.length * NODE_H + (col.length - 1) * ROW_GAP;
-            const yStart = PAD_Y + (contentH - colH) / 2;
-            col.forEach((node, ri) => {
-                node.x = x;
-                node.y = yStart + ri * rowStep;
+        if (algoNode) {
+            layerOf.set('__algo', maxFeatureLayer + 1);
+        }
+        if (outNode) {
+            layerOf.set('__output', maxFeatureLayer + 2);
+        }
+        const layers = new Map();
+        for (const n of this.nodes) {
+            const l = layerOf.get(n.id) ?? 0;
+            const arr = layers.get(l) ?? [];
+            arr.push(n);
+            layers.set(l, arr);
+        }
+        let maxCol = 0;
+        let maxRow = 0;
+        layers.forEach((nodesInCol, col) => {
+            maxCol = Math.max(maxCol, col);
+            maxRow = Math.max(maxRow, nodesInCol.length);
+        });
+        const maxCanvasHeight = PAD_Y * 2 + maxRow * NODE_H + Math.max(0, maxRow - 1) * ROW_GAP;
+        layers.forEach((nodesInCol, col) => {
+            const colHeight = nodesInCol.length * NODE_H + Math.max(0, nodesInCol.length - 1) * ROW_GAP;
+            // Vertically center this column relative to the tallest column in the graph
+            const colStartY = PAD_Y + Math.max(0, Math.floor((maxCanvasHeight - PAD_Y * 2 - colHeight) / 2));
+            nodesInCol.forEach((n, row) => {
+                n.x = PAD_X + col * (NODE_W + COL_GAP);
+                n.y = colStartY + row * (NODE_H + ROW_GAP);
             });
         });
-        this.canvasW = PAD_X * 2 + columns.length * NODE_W + (columns.length - 1) * COL_GAP;
-        this.canvasH = PAD_Y * 2 + contentH;
+        this.canvasW = Math.max(920, PAD_X * 2 + (maxCol + 1) * NODE_W + maxCol * COL_GAP);
+        this.canvasH = Math.max(540, maxCanvasHeight);
     }
     edgePath(edge) {
         const from = this.nodeById.get(edge.from);
@@ -1352,28 +2576,30 @@ export class PSPipelinesComponent {
         if (!from || !to) {
             return '';
         }
-        const sx = from.x + NODE_W;
-        const sy = from.y + NODE_H / 2;
-        const tx = to.x;
-        const ty = to.y + NODE_H / 2;
-        const dx = tx - sx;
-        const c1x = sx + dx * 0.5;
-        const c2x = tx - dx * 0.5;
-        return `M ${sx} ${sy} C ${c1x} ${sy}, ${c2x} ${ty}, ${tx} ${ty}`;
+        const x1 = from.x + NODE_W;
+        const y1 = from.y + NODE_H / 2;
+        // Account for port diameter / marker-end: end 2px before port center
+        const x2 = to.x - 2;
+        const y2 = to.y + NODE_H / 2;
+        const dx = Math.max(36, Math.abs(x2 - x1) * 0.45);
+        return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
     }
     static ɵfac = function PSPipelinesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PSPipelinesComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSPipelinesComponent, selectors: [["ps-pipelines"]], inputs: { engine: "engine", provider: "provider", currentUser: "currentUser" }, outputs: { askAgent: "askAgent" }, decls: 3, vars: 1, consts: [["data-testid", "ps-pipelines-panel", 1, "ps-panel", "ps-pipelines"], ["data-testid", "ps-pipelines-empty", 1, "ps-empty"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-diagram-project"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-pipelines-ask-agent", 3, "click"], [1, "fa-solid", "fa-robot"], ["data-testid", "ps-pipelines-picker", 1, "pl-picker"], ["data-testid", "ps-pipelines-pill", 1, "pl-pill", 3, "on", "title"], [1, "pl-toolbar"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-pipelines-save", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-validate", 3, "click", "disabled"], [1, "fa-solid", "fa-circle-check"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-train", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "ps-spacer"], ["data-testid", "ps-pipelines-dirty", 1, "ps-tag", "amber"], [1, "builder"], [1, "canvas-wrap"], [1, "canvas-bar"], [1, "ps-small", "ps-muted", 2, "font-weight", "600"], ["data-testid", "ps-pipelines-add-source", 1, "ps-pchip", "s", 3, "click"], [1, "fa-solid", "fa-database"], ["data-testid", "ps-pipelines-add-step", 1, "ps-pchip", "f", 3, "click"], [1, "fa-solid", "fa-sliders"], [1, "ps-small", "ps-muted"], [1, "fa-solid", "fa-circle-nodes"], ["data-testid", "ps-pipelines-canvas", 1, "ps-flow", "big"], ["data-testid", "ps-pipelines-edges", 1, "ps-edges"], ["data-testid", "ps-pipelines-node", 1, "ps-node", 3, "ngClass", "selected", "left", "top"], [1, "flow-toolbar"], [1, "legend"], [1, "sw", "src"], [1, "sw", "feat"], [1, "sw", "emb"], [1, "sw", "target"], [1, "sw", "algo"], ["data-testid", "ps-pipelines-inspector", 1, "ps-col", "inspector"], [1, "ps-card", "insp"], [1, "ihead"], [1, "tile", 3, "ngClass"], [2, "flex", "1"], ["data-testid", "ps-pipelines-inspector-title"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-delete"], [1, "ps-card-body"], [1, "ps-card"], [1, "ps-card-head"], [1, "fa-solid", "fa-shield-halved", 2, "color", "var(--mj-status-warning)"], [1, "ps-field"], ["type", "text", 1, "mj-input", 3, "input", "value"], ["type", "number", "step", "0.05", "min", "0", "max", "1", 1, "mj-input", 3, "input", "value"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "var(--mj-brand-primary)"], [1, "mj-input", 3, "change", "value"], ["value", "none"], ["value", "column"], ["value", "offset"], [1, "fa-solid", "fa-scissors", 2, "color", "var(--mj-brand-primary)"], ["value", "train_test_split"], ["value", "kfold"], ["value", "holdout"], ["type", "number", "step", "0.05", 1, "mj-input", 3, "input", "value"], ["data-testid", "ps-pipelines-pill", 1, "pl-pill", 3, "click", "title"], [1, "pl-pill-name"], [1, "ps-badge"], [1, "fa-solid", "fa-pen"], ["data-testid", "ps-pipelines-node", 1, "ps-node", 3, "click", "ngClass"], [1, "nh"], [1, "ps-tag"], [1, "nb"], [1, "nb-row"], [1, "port", "in"], [1, "port", "out"], [1, "k"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-delete", 3, "click"], [1, "fa-solid", "fa-trash"], [3, "value"], ["type", "number", 1, "mj-input", 3, "input", "value"], [1, "inputs-list"], [1, "inp-row"], [1, "ps-small", "ps-muted", 2, "margin-top", "4px"], ["type", "checkbox", 3, "change", "checked"], ["rows", "4", 1, "mj-textarea", 3, "input", "value"]], template: function PSPipelinesComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSPipelinesComponent, selectors: [["ps-pipelines"]], inputs: { engine: "engine", provider: "provider", currentUser: "currentUser", viewMode: "viewMode" }, outputs: { askAgent: "askAgent", navigate: "navigate" }, features: [i0.ɵɵNgOnChangesFeature], decls: 4, vars: 2, consts: [["data-testid", "ps-pipelines-panel", 1, "ps-panel", "ps-pipelines"], ["data-testid", "ps-pipelines-empty", 1, "ps-empty"], [1, "pl-layout", 3, "catalog-collapsed"], [3, "engine", "provider", "currentUser", "cloneFrom", "initialAlgorithmId"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-diagram-project"], [1, "empty-actions", 2, "display", "flex", "gap", "8px", "margin-top", "12px"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-pipelines-new-btn-empty", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-ask-agent", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "pl-layout"], ["role", "region", "aria-label", "Pipelines catalog (collapsed)", 1, "pl-collapsed-strip"], ["direction", "horizontal", "unit", "percent", 1, "pl-splitter", 3, "dragEnd", "gutterSize"], [3, "size", "minSize", "maxSize"], [3, "size", "minSize"], ["data-testid", "ps-pipelines-workspace", 1, "pl-workspace"], [1, "pl-workspace-header"], [1, "pl-workspace-title-area"], [1, "pl-breadcrumbs"], [1, "fa-solid", "fa-chevron-right", 2, "font-size", "10px"], [1, "pl-title-row"], [1, "pl-toolbar"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click", "title"], [1, "fa-solid"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-clone", 3, "click", "disabled"], [1, "fa-solid", "fa-copy"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-save", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-validate", 3, "click", "disabled"], [1, "fa-solid", "fa-circle-check"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-pipelines-train", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], ["data-testid", "ps-pipelines-dirty", 1, "ps-tag", "amber"], [1, "pl-stages-body"], [1, "builder"], ["type", "button", "aria-label", "Expand pipelines catalog", "title", "Expand catalog", 1, "pl-rail-collapse", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "pl-collapsed-strip-label"], ["data-testid", "ps-pipelines-catalog", 1, "pl-catalog"], [1, "pl-catalog-header"], [1, "pl-catalog-title-row"], [2, "display", "flex", "gap", "6px", "align-items", "center"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-pipelines-new", 3, "click"], ["type", "button", "title", "Collapse catalog", "aria-label", "Collapse catalog", 1, "pl-collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-left"], [1, "pl-search-box"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Filter pipelines...", 3, "input", "value"], [1, "pl-filter-chips"], [1, "pl-filter-chip", 3, "click"], ["data-testid", "ps-pipelines-picker", 1, "pl-picker"], ["data-testid", "ps-pipelines-pill", 1, "pl-pill", "pipeline-card", 3, "on", "title"], ["data-testid", "ps-pipelines-pill", 1, "pl-pill", "pipeline-card", 3, "click", "title"], [1, "pl-card-top"], [1, "pl-card-name"], [1, "ps-badge"], [1, "pl-card-meta"], [1, "pl-entity-tag"], [1, "pl-target-tag"], [1, "pl-card-meta", 2, "justify-content", "space-between", "margin-top", "2px"], [1, "pl-metric-badge"], [1, "fa-solid", "fa-trophy", 2, "color", "#eab308"], [1, "fa-solid", "fa-pen"], [1, "pl-stage-card"], [1, "pl-stage-header"], [1, "pl-stage-title-left"], [1, "pl-stage-num"], [1, "pl-stage-subtitle"], [1, "pl-grid-4"], [1, "pl-metric-box"], [1, "val"], [1, "fa-solid", "fa-table", 2, "color", "var(--mj-brand-primary)"], [1, "sub"], [1, "fa-solid", "fa-bullseye", 2, "color", "var(--mj-status-warning)"], [1, "fa-solid", "fa-chart-pie", 2, "color", "var(--mj-brand-primary)"], [1, "pl-metric-box", 2, "border-left", "3px solid var(--mj-brand-primary)"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "var(--mj-brand-primary)"], [2, "display", "flex", "gap", "6px"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-add-source", 3, "click"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-add-step", 3, "click"], [1, "fa-solid", "fa-sliders"], [1, "pl-grid-3"], [1, "pl-feature-group"], [1, "pl-fg-head"], [1, "fa-solid", "fa-database"], [1, "pl-fg-body"], [1, "pl-feature-row"], ["data-testid", "ps-pipelines-step-card", 1, "pl-feature-card"], [1, "fa-solid", "fa-shapes"], [1, "pl-feature-name"], [1, "ps-tag", "primary"], [1, "pl-leakage-box"], [1, "fa-solid", "fa-shield-halved"], [2, "flex", "1"], [2, "font-size", "13px", "font-weight", "700", "color", "var(--mj-text-primary)"], [2, "font-size", "12px", "color", "var(--mj-text-secondary)", "margin-top", "2px"], [2, "margin-top", "6px"], [2, "font-size", "12px", "color", "var(--mj-text-muted)"], [1, "fa-solid", "fa-lock", 2, "color", "var(--mj-status-success)"], [2, "padding", "16px", "text-align", "center", "color", "var(--mj-text-muted)", "font-size", "13px"], [1, "pl-table"], [2, "display", "flex", "gap", "8px", "align-items", "center"], [1, "pl-serving-box"], [2, "color", "var(--mj-text-muted)"], [1, "pl-metric-box", 2, "background", "var(--mj-brand-primary-subtle)", "border-color", "rgba(0,118,182,0.2)"], [1, "val", 2, "color", "var(--mj-brand-primary)"], [1, "ps-tag"], ["data-testid", "ps-pipelines-step-card", 1, "pl-feature-card", 3, "click"], [1, "pl-feature-card-header"], [1, "pl-col-chips"], [1, "pl-col-chip"], [1, "pl-step-inputs"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "pl-deny-chip"], [1, "fa-solid", "fa-flask", 2, "font-size", "24px", "margin-bottom", "8px", "display", "block", "opacity", "0.5"], ["title", "Open model record in Explorer", 1, "pl-model-row", 2, "cursor", "pointer", 3, "winner-row"], ["title", "Open model record in Explorer", 1, "pl-model-row", 2, "cursor", "pointer", 3, "click"], [2, "display", "flex", "align-items", "center", "gap", "6px"], ["href", "javascript:void(0)", 1, "pl-model-link", 3, "click"], [1, "ps-tag", "success"], [2, "text-align", "right"], ["type", "button", "title", "Open model record in Explorer", 1, "pl-action-icon-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-trophy"], ["mjButton", "", "variant", "secondary", "size", "sm", "type", "button", "title", "Open model record in Explorer", 3, "click"], ["mjButton", "", "variant", "secondary", "size", "sm", "type", "button", "title", "View training runs for this model", 3, "click"], [1, "fa-solid", "fa-flask"], ["direction", "horizontal", "unit", "percent", 1, "builder-splitter", 3, "dragEnd", "gutterSize"], [1, "canvas-wrap"], [1, "canvas-bar"], [1, "canvas-bar-left"], [1, "ps-small", "ps-muted", 2, "font-weight", "600"], ["data-testid", "ps-pipelines-add-source", 1, "ps-pchip", "s", 3, "click"], ["data-testid", "ps-pipelines-add-step", 1, "ps-pchip", "f", 3, "click"], [1, "canvas-bar-right"], [1, "ps-zoom-controls"], ["title", "Zoom Out", 1, "ps-icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-minus"], ["title", "Reset to 100%", 1, "ps-zoom-label", 3, "click"], ["title", "Zoom In", 1, "ps-icon-btn", 3, "click", "disabled"], [1, "ps-icon-btn", 3, "click", "title"], [1, "fa-solid", "fa-circle-info"], [1, "ps-small", "ps-muted", "ps-node-count"], [1, "fa-solid", "fa-circle-nodes"], ["data-testid", "ps-pipelines-canvas", 1, "ps-flow", "big"], [1, "ps-graph-viewport"], ["data-testid", "ps-pipelines-edges", 1, "ps-graph-edges"], ["id", "ps-arrow", "viewBox", "0 0 10 10", "refX", "8", "refY", "5", "markerWidth", "6", "markerHeight", "6", "orient", "auto"], ["d", "M 0 1.5 L 8 5 L 0 8.5 z", "fill", "var(--mj-border-strong)"], ["id", "ps-arrow-active", "viewBox", "0 0 10 10", "refX", "8", "refY", "5", "markerWidth", "6", "markerHeight", "6", "orient", "auto"], ["d", "M 0 1.5 L 8 5 L 0 8.5 z", "fill", "var(--mj-brand-primary)"], [1, "ps-edge-path", 3, "active"], ["data-testid", "ps-pipelines-node", 1, "ps-node", 3, "ngClass", "selected", "left", "top", "width"], [1, "flow-toolbar"], [1, "legend"], [1, "sw", "src"], [1, "sw", "feat"], [1, "sw", "emb"], [1, "sw", "target"], [1, "sw", "algo"], [1, "sw", "output"], [1, "ps-edge-path"], ["data-testid", "ps-pipelines-node", 1, "ps-node", 3, "click", "ngClass"], [1, "nh"], [1, "tile", 3, "ngClass"], [1, "ps-node-title", 3, "title"], [1, "nb"], [1, "nb-row"], [1, "port", "in"], [1, "port", "out"], [1, "k"], [1, "v", 3, "title"], ["data-testid", "ps-pipelines-inspector", 1, "ps-col", "inspector"], [1, "ps-card", "insp"], [1, "ihead"], ["data-testid", "ps-pipelines-inspector-title"], [1, "ps-small", "ps-muted"], ["type", "button", "title", "Collapse inspector", "aria-label", "Collapse inspector", 1, "insp-collapse-btn", 3, "click"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-delete"], [1, "ps-card-body"], [1, "ps-card"], [1, "ps-card-head"], [1, "fa-solid", "fa-shield-halved", 2, "color", "var(--mj-status-warning)"], [1, "ps-field"], ["type", "text", 1, "mj-input", 3, "input", "value"], ["type", "number", "step", "0.05", "min", "0", "max", "1", 1, "mj-input", 3, "input", "value"], [1, "mj-input", 3, "change", "value"], ["value", "none"], ["value", "column"], ["value", "offset"], [1, "fa-solid", "fa-scissors", 2, "color", "var(--mj-brand-primary)"], ["value", "train_test_split"], ["value", "kfold"], ["value", "holdout"], ["type", "number", "step", "0.05", 1, "mj-input", 3, "input", "value"], ["mjButton", "", "variant", "secondary", "size", "sm", "data-testid", "ps-pipelines-delete", 3, "click"], [1, "fa-solid", "fa-trash"], [3, "value"], ["type", "number", 1, "mj-input", 3, "input", "value"], ["rows", "4", 1, "mj-textarea", 3, "input", "value"], [2, "margin-top", "12px", "padding", "10px", "border-radius", "var(--mj-radius-sm)", "background", "var(--mj-bg-surface-sunken)", "border", "1px solid var(--mj-border-default)"], [1, "ps-small", "ps-muted", 2, "margin-bottom", "6px"], [2, "display", "flex", "justify-content", "space-between", "align-items", "center", "margin-bottom", "8px"], [2, "font-size", "var(--mj-text-xs)", "font-weight", "600"], ["mjButton", "", "variant", "secondary", "size", "sm", "type", "button", "title", "Open model record in Explorer", 2, "flex", "1", "justify-content", "center", 3, "click"], ["mjButton", "", "variant", "secondary", "size", "sm", "type", "button", "title", "View training runs", 2, "flex", "1", "justify-content", "center", 3, "click"], [2, "display", "flex", "flex-direction", "column", "gap", "12px"], [2, "border", "1px solid var(--mj-border-default)", "border-radius", "var(--mj-radius-md)", "padding", "12px", "background", "var(--mj-bg-surface-sunken)", "display", "flex", "flex-direction", "column", "gap", "8px"], [2, "display", "flex", "justify-content", "space-between", "align-items", "center"], [1, "ps-mono", "ps-small", "ps-muted", 3, "title"], [2, "font-size", "var(--mj-text-xs)", "color", "var(--mj-text-secondary)"], [2, "display", "flex", "flex-direction", "column", "gap", "6px", "margin-top", "4px"], ["mjButton", "", "variant", "primary", "size", "sm", "type", "button", 2, "width", "100%", "justify-content", "center", 3, "click"], ["mjButton", "", "variant", "secondary", "size", "sm", "type", "button", 2, "width", "100%", "justify-content", "center", 3, "click"], [3, "saved", "trainRequested", "closed", "engine", "provider", "currentUser", "cloneFrom", "initialAlgorithmId"]], template: function PSPipelinesComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, PSPipelinesComponent_Conditional_1_Template, 10, 0, "div", 1)(2, PSPipelinesComponent_Conditional_2_Template, 126, 32);
+            i0.ɵɵconditionalCreate(1, PSPipelinesComponent_Conditional_1_Template, 14, 0, "div", 1)(2, PSPipelinesComponent_Conditional_2_Template, 43, 24, "div", 2);
+            i0.ɵɵconditionalCreate(3, PSPipelinesComponent_Conditional_3_Template, 1, 5, "ps-pipeline-wizard", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.pipelines.length === 0 ? 1 : 2);
-        } }, dependencies: [CommonModule, i1.NgClass, MJButtonDirective], styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* Training Pipelines \u2014 real visual DAG builder driven by each pipeline's persisted spec. */\n\n.ps-pipelines { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }\n\n/* Pipeline picker bar */\n.ps-pipelines .pl-picker { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 6px; }\n.ps-pipelines .pl-toolbar { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .pl-pill {\n  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; max-width: 260px;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary); border-radius: 999px; padding: 6px 12px; font-size: 13px;\n}\n.ps-pipelines .pl-pill .pl-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-pipelines .pl-pill:hover { background: var(--mj-bg-surface-hover); }\n.ps-pipelines .pl-pill.on {\n  border-color: var(--mj-brand-primary); color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n/* The builder fills the remaining panel height; each column scrolls on its own. */\n.ps-pipelines .builder {\n  flex: 1; min-height: 0;\n  display: grid; grid-template-columns: 1fr 320px; grid-template-rows: minmax(0, 1fr); gap: 16px;\n}\n@media (max-width: 1080px) {\n  .ps-pipelines .builder { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }\n}\n\n.ps-pipelines .canvas-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }\n.ps-pipelines .canvas-bar {\n  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-bottom: none; border-radius: 10px 10px 0 0; padding: 12px 14px;\n}\n/* The DAG canvas is sized in px by the layered layout (inline width/height) and\n   may exceed the column, so it scrolls internally (both axes) while the column\n   itself stays put. flex:1 makes it absorb the remaining column height. */\n.ps-pipelines .ps-flow.big {\n  border-radius: 0;\n  flex: 1 1 auto;\n  min-height: 0;\n  max-width: 100%;\n  overflow: auto;\n}\n/* Pin every node to a fixed height so its port (top:50%) lines up exactly with\n   the SVG edge anchor (node.y + NODE_H/2). NODE_H in the component = 86. */\n.ps-pipelines .ps-flow.big .ps-node {\n  height: 86px;\n  display: flex;\n  flex-direction: column;\n}\n.ps-pipelines .ps-flow.big .ps-node .nb { flex: 1; min-height: 0; }\n.ps-pipelines .flow-toolbar {\n  display: flex; align-items: center; gap: 8px;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-top: none; border-radius: 0 0 10px 10px; padding: 10px 14px;\n}\n.ps-pipelines .legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--mj-text-secondary); flex-wrap: wrap; }\n.ps-pipelines .legend span { display: inline-flex; align-items: center; gap: 6px; }\n.ps-pipelines .legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }\n.ps-pipelines .legend .sw.src { background: var(--ps-node-source); }\n.ps-pipelines .legend .sw.feat { background: var(--ps-node-feature); }\n.ps-pipelines .legend .sw.emb { background: var(--ps-node-embedding); }\n.ps-pipelines .legend .sw.target { background: var(--ps-node-target); }\n.ps-pipelines .legend .sw.algo { background: var(--ps-node-algorithm); }\n\n/* inspector \u2014 its own scroll column, independent of the canvas. NOTE: .inspector is\n   also a .ps-col (display:flex column), so its card children ARE flex items \u2014 without\n   flex-shrink:0 they compress to fit (scrollHeight == clientHeight, verified live) and\n   the column never scrolls. These child rules are load-bearing, not decorative. */\n.ps-pipelines .inspector {\n  min-height: 0;\n  overflow-y: auto;\n}\n.ps-pipelines .inspector > * { flex: 0 0 auto; }\n.ps-pipelines .inspector .insp { position: static; }\n.ps-pipelines .ihead { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .ihead h3 { font-size: 14px; color: var(--mj-text-primary); margin: 0; }\n.ps-pipelines .ihead .tile {\n  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto; background: var(--ps-node-feature);\n}\n.ps-pipelines .ihead .tile[data-type='src'] { background: var(--ps-node-source); }\n.ps-pipelines .ihead .tile[data-type='emb'] { background: var(--ps-node-embedding); }\n.ps-pipelines .ihead .tile[data-type='target'] { background: var(--ps-node-target); }\n.ps-pipelines .ihead .tile[data-type='algo'] { background: var(--ps-node-algorithm); }\n.ps-pipelines .ihead .tile[data-type='output'] { background: var(--mj-status-success); }\n\n/* Palette chips are interactive buttons in the editor */\n.ps-pipelines .canvas-bar .ps-pchip { cursor: pointer; border: none; }\n.ps-pipelines .canvas-bar .ps-pchip:hover { filter: brightness(1.08); }\n\n/* Inspector edit fields */\n.ps-pipelines .ps-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.ps-pipelines .ps-field > label { font-size: 12px; font-weight: 650; color: var(--mj-text-muted); }\n.ps-pipelines .inputs-list { display: flex; flex-direction: column; gap: 4px; }\n.ps-pipelines .inp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mj-text-secondary); cursor: pointer; }\n\n/* Empty-state CTA spacing */\n.ps-pipelines .ps-empty button { margin-top: 16px; }\n"], encapsulation: 2 });
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showWizard ? 3 : -1);
+        } }, dependencies: [CommonModule, i1.NgClass, MJButtonDirective, PSPipelineWizardComponent, AngularSplitModule, i2.SplitComponent, i2.SplitAreaComponent, i1.DatePipe], styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* Training Pipelines \u2014 Human-Centric Master-Detail Redesign with Progressive Stages & DAG toggle */\n\n.ps-pipelines {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Master-Detail Layout with Resizable Splitter */\n.ps-pipelines .pl-layout {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  position: relative;\n}\n\n.ps-pipelines .pl-splitter {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-page);\n}\n\n.ps-pipelines .pl-collapsed-strip {\n  width: 44px;\n  flex: 0 0 44px;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  z-index: 10;\n}\n\n.ps-pipelines .pl-rail-collapse {\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-sm);\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.ps-pipelines .pl-collapsed-strip-label {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  margin-top: 8px;\n}\n\n.ps-pipelines .pl-collapse-btn {\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-sm);\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-collapse-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.ps-pipelines .pl-model-row {\n  cursor: pointer;\n  transition: background 0.12s ease;\n}\n\n.ps-pipelines .pl-model-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ps-pipelines .pl-model-link {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.ps-pipelines .pl-model-link:hover {\n  text-decoration: underline;\n}\n\n.ps-pipelines .pl-action-icon-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  width: 28px;\n  height: 28px;\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.12s ease;\n}\n\n.ps-pipelines .pl-action-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n/* Left Column: Pipeline Catalog */\n.ps-pipelines .pl-catalog {\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  height: 100%;\n}\n\n.ps-pipelines .pl-catalog-header {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .pl-catalog-title-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ps-pipelines .pl-catalog-title-row h2 {\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-search-box {\n  position: relative;\n  width: 100%;\n}\n\n.ps-pipelines .pl-search-box input {\n  width: 100%;\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 7px 10px 7px 30px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  outline: none;\n}\n\n.ps-pipelines .pl-search-box i {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.ps-pipelines .pl-filter-chips {\n  display: flex;\n  gap: 6px;\n  overflow-x: auto;\n  padding-bottom: 2px;\n}\n\n.ps-pipelines .pl-filter-chip {\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  padding: 3px 8px;\n  border-radius: 9999px;\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.ps-pipelines .pl-filter-chip.active {\n  background: var(--mj-bg-surface-subtle);\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Catalog Pipeline Cards List (data-testid=\"ps-pipelines-picker\") */\n.ps-pipelines .pl-picker {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n/* Individual Card (data-testid=\"ps-pipelines-pill\") */\n.ps-pipelines .pl-pill.pipeline-card {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 6px;\n  width: 100%;\n  max-width: none;\n  border-radius: 8px;\n  padding: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.ps-pipelines .pl-pill.pipeline-card:hover {\n  border-color: var(--mj-border-subtle);\n  background: var(--mj-bg-surface-hover);\n}\n\n.ps-pipelines .pl-pill.pipeline-card.on {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.ps-pipelines .pl-card-top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.ps-pipelines .pl-card-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n}\n\n.ps-pipelines .pl-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-entity-tag {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n}\n\n.ps-pipelines .pl-target-tag {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-metric-badge {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n/* Right Detail Workspace */\n.ps-pipelines .pl-workspace {\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n}\n\n.ps-pipelines .pl-workspace-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .pl-workspace-title-area {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.ps-pipelines .pl-breadcrumbs {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-breadcrumbs span {\n  color: var(--mj-text-secondary);\n}\n\n.ps-pipelines .pl-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .pl-title-row h1 {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n\n/* Workspace Stages Body */\n.ps-pipelines .pl-stages-body {\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 1400px;\n}\n\n.ps-pipelines .pl-stage-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.ps-pipelines .pl-stage-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ps-pipelines .pl-stage-title-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .pl-stage-num {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary-subtle);\n  color: var(--mj-brand-primary);\n  display: grid;\n  place-items: center;\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.ps-pipelines .pl-stage-title-left h3 {\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-stage-subtitle {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Stage Grids */\n.ps-pipelines .pl-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 12px;\n}\n\n.ps-pipelines .pl-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 1200px) {\n  .ps-pipelines .pl-grid-4 { grid-template-columns: repeat(2, 1fr); }\n  .ps-pipelines .pl-grid-3 { grid-template-columns: 1fr; }\n}\n\n.ps-pipelines .pl-metric-box {\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.ps-pipelines .pl-metric-box label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-metric-box .val {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .pl-metric-box .sub {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n/* Feature Group Cards */\n.ps-pipelines .pl-feature-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.ps-pipelines .pl-fg-head {\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12.5px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-fg-body {\n  padding: 10px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.ps-pipelines .pl-feature-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 5px 8px;\n  background: var(--mj-bg-surface-subtle);\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-feature-name {\n  font-family: monospace;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-feature-card {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n  padding: 6px 8px;\n  background: var(--mj-bg-surface-subtle);\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-subtle);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-feature-card:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n}\n\n.ps-pipelines .pl-feature-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.ps-pipelines .pl-col-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-top: 2px;\n}\n\n.ps-pipelines .pl-col-chip {\n  font-family: monospace;\n  font-size: 11px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-default);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-step-inputs {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 2px;\n}\n\n/* Leakage Guard Box */\n.ps-pipelines .pl-leakage-box {\n  background: var(--mj-status-warning-subtle);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n  border-radius: 8px;\n  padding: 12px 14px;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.ps-pipelines .pl-leakage-box i {\n  color: var(--mj-status-warning);\n  font-size: 18px;\n  margin-top: 2px;\n}\n\n.ps-pipelines .pl-deny-chip {\n  font-family: monospace;\n  font-size: 11px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  padding: 2px 6px;\n  border-radius: 4px;\n  text-decoration: line-through;\n  display: inline-block;\n  margin-right: 4px;\n  margin-top: 4px;\n}\n\n/* Leaderboard Table */\n.ps-pipelines .pl-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.ps-pipelines .pl-table th {\n  text-align: left;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-subtle);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ps-pipelines .pl-table td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-table tr.winner-row {\n  background: var(--mj-brand-primary-subtle);\n  font-weight: 600;\n}\n\n/* Serving Box */\n.ps-pipelines .pl-serving-box {\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  gap: 12px;\n}\n\n@media (max-width: 900px) {\n  .ps-pipelines .pl-serving-box { grid-template-columns: 1fr; }\n}\n\n/* Pipeline Graph view & inspector container when isGraphView is active */\n.ps-pipelines .builder {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ps-pipelines .builder-splitter {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: transparent;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter {\n  background: transparent;\n  transition: background-color 0.15s ease;\n  position: relative;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter:hover {\n  background-color: var(--mj-brand-primary, #6366f1);\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 2px;\n  height: 24px;\n  border-radius: 1px;\n  background: var(--mj-border-strong, #cbd5e1);\n  transition: background-color 0.15s ease;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter:hover::after {\n  background: var(--mj-bg-surface);\n}\n\n.ps-pipelines .insp-collapse-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  padding: 0;\n}\n\n.ps-pipelines .insp-collapse-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.ps-pipelines .canvas-wrap {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n  overflow: hidden;\n}\n\n.ps-pipelines .canvas-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 10px 16px;\n  z-index: 5;\n}\n\n.ps-pipelines .canvas-bar-left,\n.ps-pipelines .canvas-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .ps-zoom-controls {\n  display: flex;\n  align-items: center;\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ps-pipelines .ps-icon-btn {\n  background: none;\n  border: none;\n  padding: 5px 8px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 11px;\n}\n\n.ps-pipelines .ps-icon-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .ps-icon-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.ps-pipelines .ps-zoom-label {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  padding: 0 6px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.ps-pipelines .ps-node-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .ps-flow.big {\n  border: none;\n  border-radius: 0;\n  flex: 1 1 auto;\n  min-height: 0;\n  max-width: 100%;\n  overflow: auto;\n  position: relative;\n  background:\n    radial-gradient(var(--mj-border-default) 1px, transparent 1px) 0 0 / 24px 24px,\n    var(--mj-bg-surface-card);\n}\n\n.ps-pipelines .ps-graph-viewport {\n  position: relative;\n  transform-origin: 0 0;\n  transition: transform 0.15s ease-out;\n}\n\n.ps-pipelines .ps-graph-edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  overflow: visible;\n}\n\n.ps-pipelines .ps-edge-path {\n  stroke: var(--mj-border-strong);\n  stroke-width: 2;\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.ps-pipelines .ps-edge-path.active {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 2.5;\n}\n\n.ps-pipelines .ps-node {\n  position: absolute;\n  width: 230px;\n  height: 96px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left-width: 4px;\n  border-radius: 8px;\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.ps-pipelines .ps-node:hover {\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n  transform: translateY(-1px);\n}\n\n.ps-pipelines .ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.ps-pipelines .ps-node .nh {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  min-height: 36px;\n}\n\n.ps-pipelines .ps-node .nh i.tile {\n  width: 24px;\n  height: 24px;\n  border-radius: 6px;\n  display: grid;\n  place-items: center;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  flex: 0 0 auto;\n}\n\n.ps-pipelines .ps-node-title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ps-pipelines .ps-node .nh .ps-tag {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 5px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-subtle);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .ps-node .nb {\n  padding: 6px 10px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 3px;\n  font-size: 11px;\n}\n\n.ps-pipelines .ps-node .nb-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.ps-pipelines .ps-node .nb-row .k {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ps-pipelines .ps-node .nb-row .v {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: monospace;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Ports */\n.ps-pipelines .ps-node .port {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .ps-node .port.in { left: -6px; }\n.ps-pipelines .ps-node .port.out { right: -6px; }\n\n.ps-pipelines .ps-node.selected .port {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n}\n\n/* Node Category Accents \u2014 fallback hex values are the intended definitions; hosts may override them externally without a :root block here */\n.ps-pipelines .ps-node.src { border-left-color: var(--ps-node-src, #0284c7); }\n.ps-pipelines .ps-node.src .nh i.tile { background: var(--ps-node-src, #0284c7); }\n\n.ps-pipelines .ps-node.feat { border-left-color: var(--ps-node-feat, #7c3aed); }\n.ps-pipelines .ps-node.feat .nh i.tile { background: var(--ps-node-feat, #7c3aed); }\n\n.ps-pipelines .ps-node.emb { border-left-color: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .ps-node.emb .nh i.tile { background: var(--ps-node-emb, #4f46e5); }\n\n.ps-pipelines .ps-node.target { border-left-color: var(--ps-node-target, #059669); }\n.ps-pipelines .ps-node.target .nh i.tile { background: var(--ps-node-target, #059669); }\n\n.ps-pipelines .ps-node.algo { border-left-color: var(--ps-node-algo, #d97706); }\n.ps-pipelines .ps-node.algo .nh i.tile { background: var(--ps-node-algo, #d97706); }\n\n.ps-pipelines .ps-node.output { border-left-color: var(--ps-node-output, #16a34a); }\n.ps-pipelines .ps-node.output .nh i.tile { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  background: var(--mj-bg-surface);\n  border-top: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  z-index: 5;\n}\n\n.ps-pipelines .legend {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  flex-wrap: wrap;\n}\n\n.ps-pipelines .legend span {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .legend .sw {\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  display: inline-block;\n}\n\n.ps-pipelines .legend .sw.src { background: var(--ps-node-src, #0284c7); }\n.ps-pipelines .legend .sw.feat { background: var(--ps-node-feat, #7c3aed); }\n.ps-pipelines .legend .sw.emb { background: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .legend .sw.target { background: var(--ps-node-target, #059669); }\n.ps-pipelines .legend .sw.algo { background: var(--ps-node-algo, #d97706); }\n.ps-pipelines .legend .sw.output { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .inspector {\n  height: 100%;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ps-pipelines .inspector > * { flex: 0 0 auto; }\n.ps-pipelines .inspector .insp { position: static; border: none; background: transparent; }\n.ps-pipelines .ihead { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .ihead h3 { font-size: 14px; color: var(--mj-text-primary); margin: 0; }\n.ps-pipelines .ihead .tile {\n  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto; background: var(--ps-node-feat, #7c3aed);\n}\n.ps-pipelines .ihead .tile[data-type='src'] { background: var(--ps-node-src, #0284c7); }\n.ps-pipelines .ihead .tile[data-type='emb'] { background: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .ihead .tile[data-type='target'] { background: var(--ps-node-target, #059669); }\n.ps-pipelines .ihead .tile[data-type='algo'] { background: var(--ps-node-algo, #d97706); }\n.ps-pipelines .ihead .tile[data-type='output'] { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .canvas-bar .ps-pchip { cursor: pointer; border: none; }\n.ps-pipelines .canvas-bar .ps-pchip:hover { filter: brightness(1.08); }\n.ps-pipelines .ps-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.ps-pipelines .ps-field > label { font-size: 12px; font-weight: 650; color: var(--mj-text-muted); }\n.ps-pipelines .inputs-list { display: flex; flex-direction: column; gap: 4px; }\n.ps-pipelines .inp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mj-text-secondary); cursor: pointer; }\n.ps-pipelines .ps-empty button { margin-top: 16px; }\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PSPipelinesComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'ps-pipelines', imports: [CommonModule, MJButtonDirective], encapsulation: ViewEncapsulation.None, template: `
+        args: [{ standalone: true, selector: 'ps-pipelines', imports: [CommonModule, MJButtonDirective, PSPipelineWizardComponent, AngularSplitModule], encapsulation: ViewEncapsulation.None, template: `
     <div class="ps-panel ps-pipelines" data-testid="ps-pipelines-panel">
       @if (pipelines.length === 0) {
         <div class="ps-empty" data-testid="ps-pipelines-empty">
@@ -1381,216 +2607,699 @@ export class PSPipelinesComponent {
           <h3>No training pipelines yet</h3>
           <p>
             A training pipeline assembles features from your data, picks an algorithm, and trains a
-            versioned model. The fastest way to build one is to describe your goal to the Model
-            Development Agent — it designs the pipeline, guards against target leakage, and trains for you.
+            versioned model. You can build one step-by-step with the manual wizard or ask the Model
+            Development Agent to design one for you.
           </p>
-          <button mjButton variant="primary" size="sm" data-testid="ps-pipelines-ask-agent"
-            (click)="askAgent.emit(starterPrompt)">
-            <i class="fa-solid fa-robot"></i> Ask the agent to build one
-          </button>
-        </div>
-      } @else {
-        <!-- Pipeline picker (its own scrollable row) -->
-        <div class="pl-picker" data-testid="ps-pipelines-picker">
-          @for (p of pipelines; track p.ID) {
-            <button class="pl-pill" [class.on]="isSelectedPipeline(p)"
-              data-testid="ps-pipelines-pill" (click)="selectPipeline(p.ID)" [title]="p.Name">
-              <i class="fa-solid fa-diagram-project"></i> <span class="pl-pill-name">{{ p.Name }}</span>
-              <span class="ps-badge" [class]="statusClass(p.Status)">{{ p.Status }}</span>
+          <div class="empty-actions" style="display: flex; gap: 8px; margin-top: 12px;">
+            <button mjButton variant="primary" size="sm" data-testid="ps-pipelines-new-btn-empty"
+              (click)="openWizard()">
+              <i class="fa-solid fa-plus"></i> New Pipeline
             </button>
-          }
-        </div>
-
-        <!-- Toolbar for the selected pipeline (its own row) -->
-        <div class="pl-toolbar">
-          <button mjButton variant="primary" size="sm" data-testid="ps-pipelines-save" [disabled]="!dirty || busy" (click)="save()">
-            <i class="fa-solid fa-floppy-disk"></i> Save
-          </button>
-          <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-validate" [disabled]="busy" (click)="validate()">
-            <i class="fa-solid fa-circle-check"></i> Validate
-          </button>
-          <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-train" [disabled]="busy || dirty" (click)="train()">
-            <i class="fa-solid fa-play"></i> Train
-          </button>
-          <button mjButton variant="secondary" size="sm" (click)="refine()">
-            <i class="fa-solid fa-wand-magic-sparkles"></i> Agent
-          </button>
-          <span class="ps-spacer"></span>
-          @if (dirty) { <span class="ps-tag amber" data-testid="ps-pipelines-dirty"><i class="fa-solid fa-pen"></i> Unsaved</span> }
+            <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-ask-agent"
+              (click)="askAgent.emit(starterPrompt)">
+              <i class="fa-solid fa-robot"></i> Ask the agent
+            </button>
+          </div>
         </div>
-
-        <div class="builder">
-          <!-- Canvas -->
-          <div class="canvas-wrap">
-            <div class="canvas-bar">
-              <span class="ps-small ps-muted" style="font-weight:600">Add:</span>
-              <button class="ps-pchip s" data-testid="ps-pipelines-add-source" (click)="addSource()"><i class="fa-solid fa-database"></i> Source</button>
-              <button class="ps-pchip f" data-testid="ps-pipelines-add-step" (click)="addStep()"><i class="fa-solid fa-sliders"></i> Feature step</button>
-              <span class="ps-spacer"></span>
-              <span class="ps-small ps-muted"><i class="fa-solid fa-circle-nodes"></i> {{ nodes.length }} nodes · {{ edges.length }} edges</span>
+      } @else {
+        <div class="pl-layout" [class.catalog-collapsed]="isCatalogCollapsed">
+          @if (isCatalogCollapsed) {
+            <div class="pl-collapsed-strip" role="region" aria-label="Pipelines catalog (collapsed)">
+              <button class="pl-rail-collapse" type="button" (click)="toggleCatalog()" aria-label="Expand pipelines catalog" title="Expand catalog">
+                <i class="fa-solid fa-chevron-right"></i>
+              </button>
+              <div class="pl-collapsed-strip-label"><i class="fa-solid fa-diagram-project"></i></div>
             </div>
+          }
 
-            <div class="ps-flow big" data-testid="ps-pipelines-canvas"
-              [style.width.px]="canvasW" [style.height.px]="canvasH">
-              <svg class="ps-edges" data-testid="ps-pipelines-edges"
-                [attr.width]="canvasW" [attr.height]="canvasH"
-                [attr.viewBox]="'0 0 ' + canvasW + ' ' + canvasH">
-                @for (edge of edges; track edge.from + edge.to) {
-                  <path [attr.d]="edgePath(edge)"></path>
-                }
-              </svg>
-              @for (node of nodes; track node.id) {
-                <div class="ps-node" data-testid="ps-pipelines-node" [attr.data-node-id]="node.id"
-                  [ngClass]="node.type" [class.selected]="node.id === selectedId"
-                  [style.left.px]="node.x" [style.top.px]="node.y" (click)="selectNode(node.id)">
-                  <div class="nh">
-                    <i class="tile" [ngClass]="node.icon"></i>
-                    <span>{{ node.title }}</span>
-                    @if (node.tag) { <span class="ps-tag">{{ node.tag }}</span> }
+          <as-split direction="horizontal" class="pl-splitter" unit="percent" [gutterSize]="6" (dragEnd)="onSplitDragEnd($event.sizes)">
+            @if (!isCatalogCollapsed) {
+              <as-split-area [size]="catalogSizePct" [minSize]="18" [maxSize]="50">
+                <!-- Left Column: Master Pipeline Catalog -->
+                <div class="pl-catalog" data-testid="ps-pipelines-catalog">
+                  <div class="pl-catalog-header">
+                    <div class="pl-catalog-title-row">
+                      <h2>Pipelines ({{ filteredPipelines.length }})</h2>
+                      <div style="display:flex;gap:6px;align-items:center">
+                        <button mjButton variant="primary" size="sm" data-testid="ps-pipelines-new" (click)="openWizard()">
+                          <i class="fa-solid fa-plus"></i> New
+                        </button>
+                        <button class="pl-collapse-btn" type="button" (click)="toggleCatalog()" title="Collapse catalog" aria-label="Collapse catalog">
+                          <i class="fa-solid fa-chevron-left"></i>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="pl-search-box">
+                      <i class="fa-solid fa-magnifying-glass"></i>
+                      <input type="text" [value]="searchQuery" (input)="onSearchInput($event)" placeholder="Filter pipelines..." />
+                    </div>
+                    <div class="pl-filter-chips">
+                      <button class="pl-filter-chip" [class.active]="activeFilter === 'all'" (click)="setFilter('all')">All</button>
+                      <button class="pl-filter-chip" [class.active]="activeFilter === 'published'" (click)="setFilter('published')">Published</button>
+                      <button class="pl-filter-chip" [class.active]="activeFilter === 'draft'" (click)="setFilter('draft')">Draft</button>
+                      <button class="pl-filter-chip" [class.active]="activeFilter === 'core'" (click)="setFilter('core')">MJ Core</button>
+                    </div>
                   </div>
-                  <div class="nb">
-                    @for (row of node.rows; track row.k) {
-                      <div class="nb-row"><span class="k">{{ row.k }}</span><span>{{ row.v }}</span></div>
+
+                  <!-- Scrollable Catalog Cards List (preserves data-testid="ps-pipelines-picker" and "ps-pipelines-pill") -->
+                  <div class="pl-picker" data-testid="ps-pipelines-picker">
+                    @for (p of filteredPipelines; track p.ID) {
+                      <button class="pl-pill pipeline-card" [class.on]="isSelectedPipeline(p)"
+                        data-testid="ps-pipelines-pill" (click)="selectPipeline(p.ID)" [title]="p.Name">
+                        <div class="pl-card-top">
+                          <div class="pl-card-name">{{ p.Name }}</div>
+                          <span class="ps-badge" [class]="statusClass(p.Status)">{{ p.Status }}</span>
+                        </div>
+                        <div class="pl-card-meta">
+                          <span class="pl-entity-tag">{{ targetEntityName(p) }}</span>
+                          <span>&bull;</span>
+                          <span class="pl-target-tag">{{ p.TargetVariable || 'Target' }}</span>
+                        </div>
+                        <div class="pl-card-meta" style="justify-content: space-between; margin-top: 2px;">
+                          <span>{{ p.ProblemType }}</span>
+                          @if (bestMetricForPipeline(p); as bm) {
+                            <span class="pl-metric-badge"><i class="fa-solid fa-trophy" style="color:#eab308"></i> {{ bm }}</span>
+                          }
+                        </div>
+                      </button>
                     }
                   </div>
-                  @if (node.hasIn) { <span class="port in"></span> }
-                  @if (node.hasOut) { <span class="port out"></span> }
                 </div>
-              }
-            </div>
+              </as-split-area>
+            }
+
+            <as-split-area [size]="isCatalogCollapsed ? 100 : workspaceSizePct" [minSize]="40">
+              <!-- Right Column: Human-Centric Workspace (Stages View Default + DAG View Toggle) -->
+              <div class="pl-workspace" data-testid="ps-pipelines-workspace">
+            <div class="pl-workspace-header">
+              <div class="pl-workspace-title-area">
+                <div class="pl-breadcrumbs">
+                  <span>Pipelines</span> <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
+                  <span>{{ pipelineDomain(selectedPipeline) }}</span> <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
+                  <strong>{{ selectedPipeline?.Name }}</strong>
+                </div>
+                <div class="pl-title-row">
+                  <h1>{{ selectedPipeline?.Name }}</h1>
+                  @if (selectedPipeline) {
+                    <span class="ps-badge" [class]="statusClass(selectedPipeline.Status)">{{ selectedPipeline.Status }}</span>
+                    @if (bestMetricForPipeline(selectedPipeline); as bm) {
+                      <span class="pl-metric-badge"><i class="fa-solid fa-trophy" style="color:#eab308"></i> {{ bm }}</span>
+                    }
+                  }
+                </div>
+              </div>
 
-            <div class="flow-toolbar">
-              <div class="legend">
-                <span><i class="sw src"></i> Source</span>
-                <span><i class="sw feat"></i> Feature</span>
-                <span><i class="sw emb"></i> Embedding</span>
-                <span><i class="sw target"></i> Target</span>
-                <span><i class="sw algo"></i> Algorithm</span>
+              <!-- Action Toolbar -->
+              <div class="pl-toolbar">
+                <button mjButton variant="secondary" size="sm" (click)="toggleViewMode()" [title]="isGraphView ? 'Switch to 5-Stage Progressive Flow' : 'Switch to Pipeline Graph View'">
+                  <i class="fa-solid" [class.fa-diagram-project]="!isGraphView" [class.fa-layer-group]="isGraphView"></i>
+                  {{ isGraphView ? 'Stages View' : 'Graph View' }}
+                </button>
+                <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-clone" [disabled]="!selectedPipeline" (click)="cloneSelected()">
+                  <i class="fa-solid fa-copy"></i> Clone
+                </button>
+                <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-save" [disabled]="!dirty || busy" (click)="save()">
+                  <i class="fa-solid fa-floppy-disk"></i> Save
+                </button>
+                <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-validate" [disabled]="busy" (click)="validate()">
+                  <i class="fa-solid fa-circle-check"></i> Validate
+                </button>
+                <button mjButton variant="primary" size="sm" data-testid="ps-pipelines-train" [disabled]="busy || dirty" (click)="train()">
+                  <i class="fa-solid fa-play"></i> Train
+                </button>
+                <button mjButton variant="secondary" size="sm" (click)="refine()">
+                  <i class="fa-solid fa-wand-magic-sparkles"></i> Agent
+                </button>
+                @if (dirty) { <span class="ps-tag amber" data-testid="ps-pipelines-dirty"><i class="fa-solid fa-pen"></i> Unsaved</span> }
               </div>
             </div>
-          </div>
 
-          <!-- Inspector (editable) -->
-          <div class="ps-col inspector" data-testid="ps-pipelines-inspector">
-            <div class="ps-card insp">
-              <div class="ihead">
-                <i class="tile" [ngClass]="selectedNode.icon" [attr.data-type]="selectedNode.type"></i>
-                <div style="flex:1">
-                  <h3 data-testid="ps-pipelines-inspector-title">{{ selectedNode.title }}</h3>
-                  <div class="ps-small ps-muted">{{ nodeTypeLabel(selectedNode.type) }} · selected</div>
+            <!-- Stages View (Human-Readable Progressive Stages) -->
+            @if (viewMode === 'stages') {
+              <div class="pl-stages-body">
+                <!-- STAGE 1: Target Definition & Decision Boundary -->
+                <div class="pl-stage-card">
+                  <div class="pl-stage-header">
+                    <div class="pl-stage-title-left">
+                      <span class="pl-stage-num">1</span>
+                      <div>
+                        <h3>Target Definition & Temporal Decision Boundary</h3>
+                        <span class="pl-stage-subtitle">Defines the training unit entity, target variable, problem type, and point-in-time cutoff.</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="pl-grid-4">
+                    <div class="pl-metric-box">
+                      <label>Target Entity</label>
+                      <div class="val"><i class="fa-solid fa-table" style="color:var(--mj-brand-primary)"></i> {{ targetEntityName(selectedPipeline) }}</div>
+                      <div class="sub">Primary training unit</div>
+                    </div>
+                    <div class="pl-metric-box">
+                      <label>Target Variable</label>
+                      <div class="val"><i class="fa-solid fa-bullseye" style="color:var(--mj-status-warning)"></i> {{ editTargetVariable || 'Not set' }}</div>
+                      <div class="sub">{{ editProblemType }} outcome</div>
+                    </div>
+                    <div class="pl-metric-box">
+                      <label>Problem Type</label>
+                      <div class="val"><i class="fa-solid fa-chart-pie" style="color:var(--mj-brand-primary)"></i> {{ editProblemType }}</div>
+                      <div class="sub">Optimization discipline</div>
+                    </div>
+                    <div class="pl-metric-box" style="border-left: 3px solid var(--mj-brand-primary);">
+                      <label>As-Of Temporal Anchor</label>
+                      <div class="val"><i class="fa-solid fa-clock-rotate-left" style="color:var(--mj-brand-primary)"></i> {{ asOfLabel }}</div>
+                      <div class="sub">Temporal cutoff to prevent leakage</div>
+                    </div>
+                  </div>
                 </div>
-                @if (selectedNode.type === 'src' || selectedNode.type === 'feat' || selectedNode.type === 'emb') {
-                  <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-delete" (click)="deleteSelected()"><i class="fa-solid fa-trash"></i></button>
-                }
-              </div>
-              <div class="ps-card-body">
-                <!-- SOURCE editor -->
-                @if (selectedSource) {
-                  <div class="ps-field"><label>Kind</label>
-                    <select class="mj-input" [value]="selectedSource.Kind" (change)="setSourceKind($any($event.target).value)">
-                      @for (k of sourceKinds; track k) { <option [value]="k">{{ k }}</option> }
-                    </select>
+
+                <!-- STAGE 2: Feature Architecture & Relational Sources -->
+                <div class="pl-stage-card">
+                  <div class="pl-stage-header">
+                    <div class="pl-stage-title-left">
+                      <span class="pl-stage-num">2</span>
+                      <div>
+                        <h3>Feature Architecture & Relational Data Sources</h3>
+                        <span class="pl-stage-subtitle">Combines core entity attributes with linked relational features across the database.</span>
+                      </div>
+                    </div>
+                    <div style="display:flex; gap:6px;">
+                      <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-add-source" (click)="addSource()"><i class="fa-solid fa-plus"></i> Add Source</button>
+                      <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-add-step" (click)="addStep()"><i class="fa-solid fa-sliders"></i> Add Step</button>
+                    </div>
                   </div>
-                  <div class="ps-field"><label>Reference (entity / query / id)</label>
-                    <input class="mj-input" type="text" [value]="selectedSource.Ref" (input)="setSourceRef($any($event.target).value)" />
+
+                  <div class="pl-grid-3">
+                    <!-- Feature Group: Sources -->
+                    <div class="pl-feature-group">
+                      <div class="pl-fg-head">
+                        <span><i class="fa-solid fa-database"></i> Feed-In Sources ({{ editSources.length }})</span>
+                      </div>
+                      <div class="pl-fg-body">
+                        @for (s of editSources; track $index) {
+                          <div class="pl-feature-row">
+                            <span class="pl-feature-name">{{ s.Ref || 'Unnamed source' }}</span>
+                            <span class="ps-tag">{{ s.Kind }}</span>
+                          </div>
+                        }
+                      </div>
+                    </div>
+
+                    <!-- Feature Group: Feature Steps -->
+                    <div class="pl-feature-group">
+                      <div class="pl-fg-head">
+                        <span><i class="fa-solid fa-sliders"></i> Feature Transforms ({{ editSteps.length }})</span>
+                      </div>
+                      <div class="pl-fg-body">
+                        @for (st of editSteps; track st.Id) {
+                          <div class="pl-feature-card" data-testid="ps-pipelines-step-card" (click)="selectStep(st.Id)">
+                            <div class="pl-feature-card-header">
+                              <span class="pl-feature-name">{{ st.Label || st.Kind }}</span>
+                              <span class="ps-tag">{{ st.Kind }}</span>
+                            </div>
+                            @if (getStepColumns(st); as cols) {
+                              @if (cols.length > 0) {
+                                <div class="pl-col-chips">
+                                  @for (col of cols; track col) {
+                                    <span class="pl-col-chip">{{ col }}</span>
+                                  }
+                                </div>
+                              }
+                            }
+                            @if (getStepInputs(st); as inputs) {
+                              @if (inputs.length > 0) {
+                                <div class="pl-step-inputs">
+                                  <i class="fa-solid fa-arrow-right-to-bracket"></i>
+                                  <span>From: {{ inputs.join(', ') }}</span>
+                                </div>
+                              }
+                            }
+                          </div>
+                        }
+                      </div>
+                    </div>
+
+                    <!-- Feature Group: Algorithm Selection -->
+                    <div class="pl-feature-group">
+                      <div class="pl-fg-head">
+                        <span><i class="fa-solid fa-shapes"></i> Selected Algorithm</span>
+                      </div>
+                      <div class="pl-fg-body">
+                        <div class="pl-feature-row">
+                          <span class="pl-feature-name">{{ selectedAlgorithmName }}</span>
+                          <span class="ps-tag primary">Active</span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                  <div class="ps-field"><label>Alias (optional)</label>
-                    <input class="mj-input" type="text" [value]="selectedSource.Alias || ''" (input)="setSourceAlias($any($event.target).value)" />
+
+                  <!-- Leakage Guard Bar -->
+                  <div class="pl-leakage-box">
+                    <i class="fa-solid fa-shield-halved"></i>
+                    <div style="flex:1;">
+                      <div style="font-size:13px; font-weight:700; color:var(--mj-text-primary);">Leakage Guard Active</div>
+                      <div style="font-size:12px; color:var(--mj-text-secondary); margin-top:2px;">
+                        Deny-listed columns are excluded prior to matrix assembly. Dominance threshold: <strong>{{ editLeakage.SingleFeatureDominanceThreshold }}</strong>
+                      </div>
+                      <div style="margin-top:6px;">
+                        @if (editLeakage.DenyFields.length === 0) {
+                          <span style="font-size:12px; color:var(--mj-text-muted);">No deny-list columns configured.</span>
+                        } @else {
+                          @for (col of editLeakage.DenyFields; track col) {
+                            <span class="pl-deny-chip">{{ col }}</span>
+                          }
+                        }
+                      </div>
+                    </div>
                   </div>
-                }
-                <!-- STEP editor -->
-                @if (selectedStep) {
-                  <div class="ps-field"><label>Kind</label>
-                    <select class="mj-input" [value]="selectedStep.Kind" (change)="setStepKind($any($event.target).value)">
-                      @for (k of stepKinds; track k) { <option [value]="k">{{ k }}</option> }
-                    </select>
+                </div>
+
+                <!-- STAGE 3: Preprocessing & Data Hygiene -->
+                <div class="pl-stage-card">
+                  <div class="pl-stage-header">
+                    <div class="pl-stage-title-left">
+                      <span class="pl-stage-num">3</span>
+                      <div>
+                        <h3>Fitted Preprocessing & Validation Discipline</h3>
+                        <span class="pl-stage-subtitle">Parameters fitted once on training folds and frozen with the model artifact for inference anti-skew.</span>
+                      </div>
+                    </div>
                   </div>
-                  <div class="ps-field"><label>Label</label>
-                    <input class="mj-input" type="text" [value]="selectedStep.Label || ''" (input)="setStepLabel($any($event.target).value)" />
+
+                  <div class="pl-grid-4">
+                    <div class="pl-metric-box">
+                      <label>Validation Strategy</label>
+                      <div class="val">{{ editValidation.Strategy }}</div>
+                      <div class="sub">Cross-validation split</div>
+                    </div>
+                    <div class="pl-metric-box">
+                      <label>Locked Holdout</label>
+                      <div class="val">{{ (editValidation.LockedHoldoutFraction * 100).toFixed(0) }}%</div>
+                      <div class="sub">Honest benchmark score</div>
+                    </div>
+                    <div class="pl-metric-box">
+                      <label>Folds / Split</label>
+                      <div class="val">{{ editValidation.Strategy === 'kfold' ? (editValidation.K || 5) + ' Folds' : ((editValidation.TestSize || 0.2) * 100).toFixed(0) + '% Test' }}</div>
+                      <div class="sub">Training evaluation</div>
+                    </div>
+                    <div class="pl-metric-box">
+                      <label>Anti-Skew Guarantee</label>
+                      <div class="val"><i class="fa-solid fa-lock" style="color:var(--mj-status-success)"></i> Enforced</div>
+                      <div class="sub">Frozen params travel with model</div>
+                    </div>
                   </div>
-                  @switch (selectedStep.Kind) {
-                    @case ('select') { <div class="ps-field"><label>Columns (comma-separated)</label><input class="mj-input" type="text" [value]="columnsText" (input)="setColumns($any($event.target).value)" /></div> }
-                    @case ('standardize') { <div class="ps-field"><label>Columns (comma-separated)</label><input class="mj-input" type="text" [value]="columnsText" (input)="setColumns($any($event.target).value)" /></div> }
-                    @case ('impute') {
-                      <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', $any($event.target).value)" /></div>
-                      <div class="ps-field"><label>Strategy</label><select class="mj-input" [value]="stepField('Strategy')" (change)="setStepStr('Strategy', $any($event.target).value)">@for (s of imputeStrategies; track s) { <option [value]="s">{{ s }}</option> }</select></div>
-                    }
-                    @case ('onehot') { <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', $any($event.target).value)" /></div> }
-                    @case ('bin') {
-                      <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', $any($event.target).value)" /></div>
-                      <div class="ps-field"><label>Bins</label><input class="mj-input" type="number" [value]="stepField('Bins')" (input)="setStepNum('Bins', $any($event.target).value)" /></div>
-                    }
-                    @case ('embedding') {
-                      <div class="ps-field"><label>Entity</label><input class="mj-input" type="text" [value]="stepField('Entity')" (input)="setStepStr('Entity', $any($event.target).value)" /></div>
-                      <div class="ps-field"><label>Embedding model ref</label><input class="mj-input" type="text" [value]="stepField('EmbeddingModelRef')" (input)="setStepStr('EmbeddingModelRef', $any($event.target).value)" /></div>
-                      <div class="ps-field"><label>Dimensions</label><input class="mj-input" type="number" [value]="stepField('Dims')" (input)="setStepNum('Dims', $any($event.target).value)" /></div>
-                    }
-                    @case ('llm-derived') { <div class="ps-field"><label>Feature Pipeline ref</label><input class="mj-input" type="text" [value]="stepField('FeaturePipelineRef')" (input)="setStepStr('FeaturePipelineRef', $any($event.target).value)" /></div> }
-                    @case ('flow-agent') { <div class="ps-field"><label>Flow Agent ref</label><input class="mj-input" type="text" [value]="stepField('FlowAgentRef')" (input)="setStepStr('FlowAgentRef', $any($event.target).value)" /></div> }
-                    @case ('vision-llm') { <div class="ps-field"><label>Image column</label><input class="mj-input" type="text" [value]="stepField('ImageColumn')" (input)="setStepStr('ImageColumn', $any($event.target).value)" /></div> }
+                </div>
+
+                <!-- STAGE 4: Multi-Algorithm Tournament & Leaderboard -->
+                <div class="pl-stage-card">
+                  <div class="pl-stage-header">
+                    <div class="pl-stage-title-left">
+                      <span class="pl-stage-num">4</span>
+                      <div>
+                        <h3>Multi-Algorithm Tournament Leaderboard</h3>
+                        <span class="pl-stage-subtitle">Models trained and scored on locked holdout data for this pipeline.</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  @if (pipelineModels.length === 0) {
+                    <div style="padding: 16px; text-align: center; color: var(--mj-text-muted); font-size: 13px;">
+                      <i class="fa-solid fa-flask" style="font-size: 24px; margin-bottom: 8px; display: block; opacity: 0.5;"></i>
+                      No models trained yet for this pipeline. Click <strong>Train</strong> to execute the first training run.
+                    </div>
+                  } @else {
+                    <table class="pl-table">
+                      <thead>
+                        <tr>
+                          <th>Version</th>
+                          <th>Algorithm</th>
+                          <th>Holdout Score</th>
+                          <th>Status</th>
+                          <th>Trained At</th>
+                          <th></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        @for (m of pipelineModels; track m.ID) {
+                          <tr [class.winner-row]="m.Status === 'Published'" class="pl-model-row" (click)="openModelRecord(m.ID)" style="cursor:pointer;" title="Open model record in Explorer">
+                            <td>
+                              <div style="display:flex;align-items:center;gap:6px">
+                                <a class="pl-model-link" href="javascript:void(0)" (click)="$event.stopPropagation(); openModelRecord(m.ID)">
+                                  <strong>v{{ m.Version }}</strong>
+                                </a>
+                                @if (m.Status === 'Published') {
+                                  <span class="ps-tag success"><i class="fa-solid fa-trophy"></i> Winner</span>
+                                }
+                              </div>
+                            </td>
+                            <td>{{ m.Algorithm || 'Algorithm' }}</td>
+                            <td><strong>{{ formatHoldout(m) }}</strong></td>
+                            <td><span class="ps-badge" [class]="statusClass(m.Status)">{{ m.Status }}</span></td>
+                            <td>{{ m.TrainedAt | date:'short' }}</td>
+                            <td style="text-align:right">
+                              <button type="button" class="pl-action-icon-btn" (click)="$event.stopPropagation(); openModelRecord(m.ID)" title="Open model record in Explorer">
+                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
+                              </button>
+                            </td>
+                          </tr>
+                        }
+                      </tbody>
+                    </table>
                   }
-                  <!-- rewire: upstream step inputs -->
-                  @if (otherSteps.length > 0) {
-                    <div class="ps-field"><label>Inputs (upstream steps)</label>
-                      <div class="inputs-list">
-                        @for (s of otherSteps; track s.Id) {
-                          <label class="inp-row"><input type="checkbox" [checked]="hasInput(s.Id)" (change)="toggleInput(s.Id)" /> {{ s.Label || s.Kind }}</label>
+                </div>
+
+                <!-- STAGE 5: Production Serving & Deep Link -->
+                <div class="pl-stage-card">
+                  <div class="pl-stage-header">
+                    <div class="pl-stage-title-left">
+                      <span class="pl-stage-num">5</span>
+                      <div>
+                        <h3>Production Serving & Model Registry</h3>
+                        <span class="pl-stage-subtitle">Active inference wiring and model registry status.</span>
+                      </div>
+                    </div>
+                    <div style="display:flex;gap:8px;align-items:center;">
+                      @if (publishedModel; as pub) {
+                        <button mjButton variant="secondary" size="sm" type="button"
+                          (click)="openModelRecord(pub.ID)"
+                          title="Open model record in Explorer">
+                          <i class="fa-solid fa-arrow-up-right-from-square"></i> Open Model Record
+                        </button>
+                        <button mjButton variant="secondary" size="sm" type="button"
+                          (click)="viewTrainingRuns(pub.ID)"
+                          title="View training runs for this model">
+                          <i class="fa-solid fa-flask"></i> View Training Runs
+                        </button>
+                      }
+                    </div>
+                  </div>
+
+                  <div class="pl-serving-box">
+                    <div class="pl-metric-box">
+                      <label>Active Serving Model</label>
+                      <div class="val">
+                        @if (publishedModel; as pub) {
+                          <span>v{{ pub.Version }} ({{ pub.Algorithm || 'Model' }}) &bull; ID: {{ pub.ID.slice(0, 8) }}…</span>
+                        } @else {
+                          <span style="color:var(--mj-text-muted);">No published model serving live predictions yet.</span>
                         }
                       </div>
-                      <div class="ps-small ps-muted" style="margin-top:4px">No inputs = a root step fed directly by the sources.</div>
+                      <div class="sub">Model: {{ publishedModel?.Status || 'None' }} &bull; Pipeline: {{ selectedPipeline?.Status }}</div>
                     </div>
-                  }
-                }
-                <!-- TARGET editor -->
-                @if (selectedNode.type === 'target') {
-                  <div class="ps-field"><label>Target variable</label><input class="mj-input" type="text" [value]="editTargetVariable" (input)="setTargetVariable($any($event.target).value)" /></div>
-                  <div class="ps-field"><label>Problem type</label><select class="mj-input" [value]="editProblemType" (change)="setProblemType($any($event.target).value)">@for (pt of problemTypes; track pt) { <option [value]="pt">{{ pt }}</option> }</select></div>
-                }
-                <!-- ALGORITHM editor -->
-                @if (selectedNode.type === 'algo') {
-                  <div class="ps-field"><label>Algorithm</label><select class="mj-input" [value]="editAlgorithmId" (change)="setAlgorithm($any($event.target).value)">@for (a of algorithms; track a.ID) { <option [value]="a.ID">{{ a.Name }}</option> }</select></div>
-                  <div class="ps-field"><label>Hyperparameters (JSON)</label><textarea class="mj-textarea" rows="4" [value]="editHyperparams" (input)="setHyperparams($any($event.target).value)"></textarea></div>
-                }
-                @if (selectedNode.type === 'output') {
-                  <div class="ps-small ps-muted">The trained model artifact. Run <strong>Train</strong> to produce a new versioned model from this pipeline.</div>
-                }
-              </div>
-            </div>
+                    <div class="pl-metric-box" style="background:var(--mj-brand-primary-subtle); border-color:rgba(0,118,182,0.2);">
+                      <label>Inference Readiness</label>
+                      <div class="val" style="color:var(--mj-brand-primary)">
+                        <i class="fa-solid fa-circle-check"></i> Ready
+                      </div>
+                      <div class="sub">Batch & on-demand scoring enabled</div>
+                    </div>
+                  </div>
+                </div>
 
-            <!-- Leakage guard (editable) -->
-            <div class="ps-card">
-              <div class="ps-card-head"><i class="fa-solid fa-shield-halved" style="color:var(--mj-status-warning)"></i><h3>Leakage guard</h3></div>
-              <div class="ps-card-body">
-                <div class="ps-field"><label>Deny-list columns (comma-separated)</label><input class="mj-input" type="text" [value]="denyText" (input)="setDeny($any($event.target).value)" /></div>
-                <div class="ps-field"><label>Single-feature dominance threshold</label><input class="mj-input" type="number" step="0.05" min="0" max="1" [value]="editLeakage.SingleFeatureDominanceThreshold" (input)="setThreshold($any($event.target).value)" /></div>
               </div>
-            </div>
+            }
 
-            <!-- As-of strategy (editable) -->
-            <div class="ps-card">
-              <div class="ps-card-head"><i class="fa-solid fa-clock-rotate-left" style="color:var(--mj-brand-primary)"></i><h3>As-of strategy</h3></div>
-              <div class="ps-card-body">
-                <div class="ps-field"><label>Mode</label><select class="mj-input" [value]="editAsOf.Mode" (change)="setAsOfMode($any($event.target).value)"><option value="none">none</option><option value="column">column</option><option value="offset">offset</option></select></div>
-                @if (editAsOf.Mode === 'column') { <div class="ps-field"><label>Decision-date column</label><input class="mj-input" type="text" [value]="editAsOf.Column || ''" (input)="setAsOfColumn($any($event.target).value)" /></div> }
-                @if (editAsOf.Mode === 'offset') { <div class="ps-field"><label>Offset days before label</label><input class="mj-input" type="number" [value]="editAsOf.OffsetDays ?? 0" (input)="setAsOfOffset($any($event.target).value)" /></div> }
-              </div>
-            </div>
+            <!-- Graph Canvas & Inspector -->
+            @if (isGraphView) {
+              <div class="builder">
+                <as-split direction="horizontal" class="builder-splitter" unit="percent" [gutterSize]="6" (dragEnd)="onInspectorSplitDragEnd($event.sizes)">
+                  <as-split-area [size]="isInspectorCollapsed ? 100 : canvasSizePct" [minSize]="40">
+                    <!-- Canvas Wrap -->
+                    <div class="canvas-wrap">
+                      <div class="canvas-bar">
+                        <div class="canvas-bar-left">
+                          <span class="ps-small ps-muted" style="font-weight:600">Add to Graph:</span>
+                          <button class="ps-pchip s" data-testid="ps-pipelines-add-source" (click)="addSource()"><i class="fa-solid fa-database"></i> Source</button>
+                          <button class="ps-pchip f" data-testid="ps-pipelines-add-step" (click)="addStep()"><i class="fa-solid fa-sliders"></i> Feature step</button>
+                        </div>
+                        <div class="canvas-bar-right">
+                          <div class="ps-zoom-controls">
+                            <button class="ps-icon-btn" (click)="zoomOut()" [disabled]="zoomLevel <= 0.5" title="Zoom Out"><i class="fa-solid fa-minus"></i></button>
+                            <span class="ps-zoom-label" (click)="resetZoom()" title="Reset to 100%">{{ Math.round(zoomLevel * 100) }}%</span>
+                            <button class="ps-icon-btn" (click)="zoomIn()" [disabled]="zoomLevel >= 2.0" title="Zoom In"><i class="fa-solid fa-plus"></i></button>
+                          </div>
+                          <button class="ps-icon-btn" [class.active]="!isInspectorCollapsed" (click)="toggleInspector()" [title]="isInspectorCollapsed ? 'Open Inspector' : 'Collapse Inspector'">
+                            <i class="fa-solid fa-circle-info"></i>
+                          </button>
+                          <span class="ps-small ps-muted ps-node-count"><i class="fa-solid fa-circle-nodes"></i> {{ nodes.length }} nodes · {{ edges.length }} edges</span>
+                        </div>
+                      </div>
 
-            <!-- Validation (editable) -->
-            <div class="ps-card">
-              <div class="ps-card-head"><i class="fa-solid fa-scissors" style="color:var(--mj-brand-primary)"></i><h3>Validation</h3></div>
-              <div class="ps-card-body">
-                <div class="ps-field"><label>Strategy</label><select class="mj-input" [value]="editValidation.Strategy" (change)="setValStrategy($any($event.target).value)"><option value="train_test_split">train_test_split</option><option value="kfold">kfold</option><option value="holdout">holdout</option></select></div>
-                @if (editValidation.Strategy === 'train_test_split') { <div class="ps-field"><label>Test size</label><input class="mj-input" type="number" step="0.05" [value]="editValidation.TestSize ?? 0.2" (input)="setTestSize($any($event.target).value)" /></div> }
-                @if (editValidation.Strategy === 'kfold') { <div class="ps-field"><label>Folds (k)</label><input class="mj-input" type="number" [value]="editValidation.K ?? 5" (input)="setK($any($event.target).value)" /></div> }
-                <div class="ps-field"><label>Locked holdout fraction</label><input class="mj-input" type="number" step="0.05" [value]="editValidation.LockedHoldoutFraction" (input)="setHoldout($any($event.target).value)" /></div>
-              </div>
-            </div>
+                  <div class="ps-flow big" data-testid="ps-pipelines-canvas">
+                    <div class="ps-graph-viewport"
+                         [style.width.px]="canvasW"
+                         [style.height.px]="canvasH"
+                         [style.transform]="'scale(' + zoomLevel + ')'">
+                      <svg class="ps-graph-edges"
+                           data-testid="ps-pipelines-edges"
+                           [attr.width]="canvasW"
+                           [attr.height]="canvasH">
+                        <defs>
+                          <marker id="ps-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+                            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--mj-border-strong)" />
+                          </marker>
+                          <marker id="ps-arrow-active" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+                            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--mj-brand-primary)" />
+                          </marker>
+                        </defs>
+                        @for (edge of edges; track edge.from + '->' + edge.to) {
+                          <path class="ps-edge-path"
+                                [class.active]="isEdgeActive(edge)"
+                                [attr.d]="edgePath(edge)"
+                                [attr.marker-end]="isEdgeActive(edge) ? 'url(#ps-arrow-active)' : 'url(#ps-arrow)'"></path>
+                        }
+                      </svg>
+                      @for (node of nodes; track node.id) {
+                        <div class="ps-node" data-testid="ps-pipelines-node" [attr.data-node-id]="node.id"
+                          [ngClass]="node.type" [class.selected]="node.id === selectedId"
+                          [style.left.px]="node.x" [style.top.px]="node.y"
+                          [style.width.px]="NODE_W"
+                          (click)="selectNode(node.id)">
+                          <div class="nh">
+                            <i class="tile" [ngClass]="node.icon"></i>
+                            <span class="ps-node-title" [title]="node.title">{{ node.title }}</span>
+                            @if (node.tag) { <span class="ps-tag">{{ node.tag }}</span> }
+                          </div>
+                          <div class="nb">
+                            @for (row of node.rows; track row.k) {
+                              <div class="nb-row">
+                                <span class="k">{{ row.k }}</span>
+                                <span class="v" [title]="row.v">{{ row.v }}</span>
+                              </div>
+                            }
+                          </div>
+                          @if (node.hasIn) { <span class="port in"></span> }
+                          @if (node.hasOut) { <span class="port out"></span> }
+                        </div>
+                      }
+                    </div>
+                  </div>
+
+                  <div class="flow-toolbar">
+                    <div class="legend">
+                      <span><i class="sw src"></i> Source</span>
+                      <span><i class="sw feat"></i> Feature</span>
+                      <span><i class="sw emb"></i> Embedding</span>
+                      <span><i class="sw target"></i> Target</span>
+                      <span><i class="sw algo"></i> Algorithm</span>
+                      <span><i class="sw output"></i> Model</span>
+                    </div>
+                  </div>
+                </div>
+              </as-split-area>
+
+            @if (!isInspectorCollapsed) {
+              <as-split-area [size]="inspectorSizePct" [minSize]="20" [maxSize]="55">
+                <!-- Inspector -->
+                <div class="ps-col inspector" data-testid="ps-pipelines-inspector">
+                  <div class="ps-card insp">
+                    <div class="ihead">
+                      <i class="tile" [ngClass]="selectedNode.icon" [attr.data-type]="selectedNode.type"></i>
+                      <div style="flex:1">
+                        <h3 data-testid="ps-pipelines-inspector-title">{{ selectedNode.title }}</h3>
+                        <div class="ps-small ps-muted">{{ nodeTypeLabel(selectedNode.type) }} · selected</div>
+                      </div>
+                      <button class="insp-collapse-btn" type="button" (click)="toggleInspector()" title="Collapse inspector" aria-label="Collapse inspector">
+                        <i class="fa-solid fa-chevron-right"></i>
+                      </button>
+                      @if (selectedNode.type === 'src' || selectedNode.type === 'feat' || selectedNode.type === 'emb') {
+                        <button mjButton variant="secondary" size="sm" data-testid="ps-pipelines-delete" (click)="deleteSelected()"><i class="fa-solid fa-trash"></i></button>
+                      }
+                    </div>
+                    <div class="ps-card-body">
+                      @if (selectedSource) {
+                        <div class="ps-field"><label>Kind</label>
+                          <select class="mj-input" [value]="selectedSource.Kind" (change)="setSourceKind(inputVal($event))">
+                            @for (k of sourceKinds; track k) { <option [value]="k">{{ k }}</option> }
+                          </select>
+                        </div>
+                        <div class="ps-field"><label>Reference (entity / query / id)</label>
+                          <input class="mj-input" type="text" [value]="selectedSource.Ref" (input)="setSourceRef(inputVal($event))" />
+                        </div>
+                        <div class="ps-field"><label>Alias (optional)</label>
+                          <input class="mj-input" type="text" [value]="selectedSource.Alias || ''" (input)="setSourceAlias(inputVal($event))" />
+                        </div>
+                      }
+                      @if (selectedStep) {
+                        <div class="ps-field"><label>Kind</label>
+                          <select class="mj-input" [value]="selectedStep.Kind" (change)="setStepKind(inputVal($event))">
+                            @for (k of stepKinds; track k) { <option [value]="k">{{ k }}</option> }
+                          </select>
+                        </div>
+                        <div class="ps-field"><label>Label</label>
+                          <input class="mj-input" type="text" [value]="selectedStep.Label || ''" (input)="setStepLabel(inputVal($event))" />
+                        </div>
+                        @switch (selectedStep.Kind) {
+                          @case ('select') { <div class="ps-field"><label>Columns (comma-separated)</label><input class="mj-input" type="text" [value]="columnsText" (input)="setColumns(inputVal($event))" /></div> }
+                          @case ('standardize') { <div class="ps-field"><label>Columns (comma-separated)</label><input class="mj-input" type="text" [value]="columnsText" (input)="setColumns(inputVal($event))" /></div> }
+                          @case ('impute') {
+                            <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', inputVal($event))" /></div>
+                            <div class="ps-field"><label>Strategy</label><select class="mj-input" [value]="stepField('Strategy')" (change)="setStepStr('Strategy', inputVal($event))">@for (s of imputeStrategies; track s) { <option [value]="s">{{ s }}</option> }</select></div>
+                          }
+                          @case ('onehot') { <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', inputVal($event))" /></div> }
+                          @case ('bin') {
+                            <div class="ps-field"><label>Column</label><input class="mj-input" type="text" [value]="stepField('Column')" (input)="setStepStr('Column', inputVal($event))" /></div>
+                            <div class="ps-field"><label>Bins</label><input class="mj-input" type="number" [value]="stepField('Bins')" (input)="setStepNum('Bins', inputVal($event))" /></div>
+                          }
+                          @case ('embedding') {
+                            <div class="ps-field"><label>Entity</label><input class="mj-input" type="text" [value]="stepField('Entity')" (input)="setStepStr('Entity', inputVal($event))" /></div>
+                            <div class="ps-field"><label>Embedding model ref</label><input class="mj-input" type="text" [value]="stepField('EmbeddingModelRef')" (input)="setStepStr('EmbeddingModelRef', inputVal($event))" /></div>
+                            <div class="ps-field"><label>Dimensions</label><input class="mj-input" type="number" [value]="stepField('Dims')" (input)="setStepNum('Dims', inputVal($event))" /></div>
+                          }
+                          @case ('llm-derived') { <div class="ps-field"><label>Feature Pipeline ref</label><input class="mj-input" type="text" [value]="stepField('FeaturePipelineRef')" (input)="setStepStr('FeaturePipelineRef', inputVal($event))" /></div> }
+                          @case ('flow-agent') { <div class="ps-field"><label>Flow Agent ref</label><input class="mj-input" type="text" [value]="stepField('FlowAgentRef')" (input)="setStepStr('FlowAgentRef', inputVal($event))" /></div> }
+                          @case ('vision-llm') { <div class="ps-field"><label>Image column</label><input class="mj-input" type="text" [value]="stepField('ImageColumn')" (input)="setStepStr('ImageColumn', inputVal($event))" /></div> }
+                        }
+                      }
+                      @if (selectedNode.type === 'target') {
+                        <div class="ps-field"><label>Target variable</label><input class="mj-input" type="text" [value]="editTargetVariable" (input)="setTargetVariable(inputVal($event))" /></div>
+                        <div class="ps-field"><label>Problem type</label><select class="mj-input" [value]="editProblemType" (change)="setProblemType(inputVal($event))">@for (pt of problemTypes; track pt) { <option [value]="pt">{{ pt }}</option> }</select></div>
+                      }
+                      @if (selectedNode.type === 'algo') {
+                        <div class="ps-field"><label>Algorithm</label><select class="mj-input" [value]="editAlgorithmId" (change)="setAlgorithm(inputVal($event))">@for (a of algorithms; track a.ID) { <option [value]="a.ID">{{ a.Name }}</option> }</select></div>
+                        <div class="ps-field"><label>Hyperparameters (JSON)</label><textarea class="mj-textarea" rows="4" [value]="editHyperparams" (input)="setHyperparams(inputVal($event))"></textarea></div>
+                        @if (publishedModel; as pub) {
+                          <div style="margin-top:12px;padding:10px;border-radius:var(--mj-radius-sm);background:var(--mj-bg-surface-sunken);border:1px solid var(--mj-border-default);">
+                            <div class="ps-small ps-muted" style="margin-bottom:6px;">Current Serving Winner</div>
+                            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+                              <span style="font-size:var(--mj-text-xs);font-weight:600;">v{{ pub.Version }} ({{ pub.Algorithm || 'Model' }})</span>
+                              <span class="ps-tag success"><i class="fa-solid fa-trophy"></i> Active</span>
+                            </div>
+                            <div style="display:flex;gap:6px;">
+                              <button mjButton variant="secondary" size="sm" type="button" (click)="openModelRecord(pub.ID)" style="flex:1;justify-content:center;" title="Open model record in Explorer">
+                                <i class="fa-solid fa-arrow-up-right-from-square"></i> Model
+                              </button>
+                              <button mjButton variant="secondary" size="sm" type="button" (click)="viewTrainingRuns(pub.ID)" style="flex:1;justify-content:center;" title="View training runs">
+                                <i class="fa-solid fa-flask"></i> Runs
+                              </button>
+                            </div>
+                          </div>
+                        }
+                      }
+                      @if (selectedNode.type === 'output') {
+                        @if (pipelineModels.length === 0) {
+                          <div class="ps-small ps-muted">The trained model artifact. Run <strong>Train</strong> to produce a new versioned model from this pipeline.</div>
+                        } @else {
+                          <div style="display:flex;flex-direction:column;gap:12px;">
+                            @if (pipelineModels.length > 1) {
+                              <div class="ps-field">
+                                <label>Model Version</label>
+                                <select class="mj-input" [value]="inspectedModel?.ID" (change)="selectModelVersion(inputVal($event))">
+                                  @for (m of pipelineModels; track m.ID) {
+                                    <option [value]="m.ID">v{{ m.Version }} · {{ m.Algorithm || 'Algorithm' }} ({{ m.Status }})</option>
+                                  }
+                                </select>
+                              </div>
+                            }
+                            @if (inspectedModel; as mdl) {
+                              <div style="border:1px solid var(--mj-border-default);border-radius:var(--mj-radius-md);padding:12px;background:var(--mj-bg-surface-sunken);display:flex;flex-direction:column;gap:8px;">
+                                <div style="display:flex;justify-content:space-between;align-items:center;">
+                                  <div style="display:flex;align-items:center;gap:6px;">
+                                    <strong>v{{ mdl.Version }}</strong>
+                                    @if (mdl.Status === 'Published') {
+                                      <span class="ps-tag success"><i class="fa-solid fa-trophy"></i> Winner</span>
+                                    }
+                                    <span class="ps-badge" [class]="statusClass(mdl.Status)">{{ mdl.Status }}</span>
+                                  </div>
+                                  <span class="ps-mono ps-small ps-muted" [title]="mdl.ID">{{ mdl.ID.slice(0, 8) }}…</span>
+                                </div>
+                                <div style="font-size:var(--mj-text-xs);color:var(--mj-text-secondary);">
+                                  Algorithm: <strong>{{ mdl.Algorithm || selectedAlgorithmName }}</strong>
+                                </div>
+                                <div style="font-size:var(--mj-text-xs);color:var(--mj-text-secondary);">
+                                  Holdout Score: <strong>{{ formatHoldout(mdl) }}</strong>
+                                </div>
+                                <div style="display:flex;flex-direction:column;gap:6px;margin-top:4px;">
+                                  <button mjButton variant="primary" size="sm" type="button" (click)="openModelRecord(mdl.ID)" style="width:100%;justify-content:center;">
+                                    <i class="fa-solid fa-arrow-up-right-from-square"></i> Open Model Details
+                                  </button>
+                                  <button mjButton variant="secondary" size="sm" type="button" (click)="viewTrainingRuns(mdl.ID)" style="width:100%;justify-content:center;">
+                                    <i class="fa-solid fa-flask"></i> View Training Runs
+                                  </button>
+                                </div>
+                              </div>
+                            }
+                          </div>
+                        }
+                      }
+                    </div>
+                  </div>
+
+                  <!-- Leakage guard (editable) -->
+                  <div class="ps-card">
+                    <div class="ps-card-head"><i class="fa-solid fa-shield-halved" style="color:var(--mj-status-warning)"></i><h3>Leakage guard</h3></div>
+                    <div class="ps-card-body">
+                      <div class="ps-field"><label>Deny-list columns (comma-separated)</label><input class="mj-input" type="text" [value]="denyText" (input)="setDeny(inputVal($event))" /></div>
+                      <div class="ps-field"><label>Single-feature dominance threshold</label><input class="mj-input" type="number" step="0.05" min="0" max="1" [value]="editLeakage.SingleFeatureDominanceThreshold" (input)="setThreshold(inputVal($event))" /></div>
+                    </div>
+                  </div>
+
+                  <!-- As-of strategy (editable) -->
+                  <div class="ps-card">
+                    <div class="ps-card-head"><i class="fa-solid fa-clock-rotate-left" style="color:var(--mj-brand-primary)"></i><h3>As-of strategy</h3></div>
+                    <div class="ps-card-body">
+                      <div class="ps-field"><label>Mode</label><select class="mj-input" [value]="editAsOf.Mode" (change)="setAsOfMode(inputVal($event))"><option value="none">none</option><option value="column">column</option><option value="offset">offset</option></select></div>
+                      @if (editAsOf.Mode === 'column') { <div class="ps-field"><label>Decision-date column</label><input class="mj-input" type="text" [value]="editAsOf.Column || ''" (input)="setAsOfColumn(inputVal($event))" /></div> }
+                      @if (editAsOf.Mode === 'offset') { <div class="ps-field"><label>Offset days before label</label><input class="mj-input" type="number" [value]="editAsOf.OffsetDays ?? 0" (input)="setAsOfOffset(inputVal($event))" /></div> }
+                    </div>
+                  </div>
+
+                  <!-- Validation (editable) -->
+                  <div class="ps-card">
+                    <div class="ps-card-head"><i class="fa-solid fa-scissors" style="color:var(--mj-brand-primary)"></i><h3>Validation</h3></div>
+                    <div class="ps-card-body">
+                      <div class="ps-field"><label>Strategy</label><select class="mj-input" [value]="editValidation.Strategy" (change)="setValStrategy(inputVal($event))"><option value="train_test_split">train_test_split</option><option value="kfold">kfold</option><option value="holdout">holdout</option></select></div>
+                      @if (editValidation.Strategy === 'train_test_split') { <div class="ps-field"><label>Test size</label><input class="mj-input" type="number" step="0.05" [value]="editValidation.TestSize ?? 0.2" (input)="setTestSize(inputVal($event))" /></div> }
+                      @if (editValidation.Strategy === 'kfold') { <div class="ps-field"><label>Folds (k)</label><input class="mj-input" type="number" [value]="editValidation.K ?? 5" (input)="setK(inputVal($event))" /></div> }
+                      <div class="ps-field"><label>Locked holdout fraction</label><input class="mj-input" type="number" step="0.05" [value]="editValidation.LockedHoldoutFraction" (input)="setHoldout(inputVal($event))" /></div>
+                    </div>
+                  </div>
+                  </div>
+                </as-split-area>
+              }
+            </as-split>
           </div>
+        }
+              </div>
+            </as-split-area>
+          </as-split>
         </div>
       }
+
+      @if (showWizard) {
+        <ps-pipeline-wizard
+          [engine]="engine"
+          [provider]="provider"
+          [currentUser]="currentUser"
+          [cloneFrom]="wizardClonePipeline"
+          [initialAlgorithmId]="initialWizardAlgorithmId"
+          (saved)="onWizardSaved($event)"
+          (trainRequested)="onWizardTrainRequested($event)"
+          (closed)="closeWizard()">
+        </ps-pipeline-wizard>
+      }
     </div>
-  `, styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* Training Pipelines \u2014 real visual DAG builder driven by each pipeline's persisted spec. */\n\n.ps-pipelines { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }\n\n/* Pipeline picker bar */\n.ps-pipelines .pl-picker { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 6px; }\n.ps-pipelines .pl-toolbar { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .pl-pill {\n  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; max-width: 260px;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary); border-radius: 999px; padding: 6px 12px; font-size: 13px;\n}\n.ps-pipelines .pl-pill .pl-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-pipelines .pl-pill:hover { background: var(--mj-bg-surface-hover); }\n.ps-pipelines .pl-pill.on {\n  border-color: var(--mj-brand-primary); color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n/* The builder fills the remaining panel height; each column scrolls on its own. */\n.ps-pipelines .builder {\n  flex: 1; min-height: 0;\n  display: grid; grid-template-columns: 1fr 320px; grid-template-rows: minmax(0, 1fr); gap: 16px;\n}\n@media (max-width: 1080px) {\n  .ps-pipelines .builder { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }\n}\n\n.ps-pipelines .canvas-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }\n.ps-pipelines .canvas-bar {\n  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-bottom: none; border-radius: 10px 10px 0 0; padding: 12px 14px;\n}\n/* The DAG canvas is sized in px by the layered layout (inline width/height) and\n   may exceed the column, so it scrolls internally (both axes) while the column\n   itself stays put. flex:1 makes it absorb the remaining column height. */\n.ps-pipelines .ps-flow.big {\n  border-radius: 0;\n  flex: 1 1 auto;\n  min-height: 0;\n  max-width: 100%;\n  overflow: auto;\n}\n/* Pin every node to a fixed height so its port (top:50%) lines up exactly with\n   the SVG edge anchor (node.y + NODE_H/2). NODE_H in the component = 86. */\n.ps-pipelines .ps-flow.big .ps-node {\n  height: 86px;\n  display: flex;\n  flex-direction: column;\n}\n.ps-pipelines .ps-flow.big .ps-node .nb { flex: 1; min-height: 0; }\n.ps-pipelines .flow-toolbar {\n  display: flex; align-items: center; gap: 8px;\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-top: none; border-radius: 0 0 10px 10px; padding: 10px 14px;\n}\n.ps-pipelines .legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--mj-text-secondary); flex-wrap: wrap; }\n.ps-pipelines .legend span { display: inline-flex; align-items: center; gap: 6px; }\n.ps-pipelines .legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }\n.ps-pipelines .legend .sw.src { background: var(--ps-node-source); }\n.ps-pipelines .legend .sw.feat { background: var(--ps-node-feature); }\n.ps-pipelines .legend .sw.emb { background: var(--ps-node-embedding); }\n.ps-pipelines .legend .sw.target { background: var(--ps-node-target); }\n.ps-pipelines .legend .sw.algo { background: var(--ps-node-algorithm); }\n\n/* inspector \u2014 its own scroll column, independent of the canvas. NOTE: .inspector is\n   also a .ps-col (display:flex column), so its card children ARE flex items \u2014 without\n   flex-shrink:0 they compress to fit (scrollHeight == clientHeight, verified live) and\n   the column never scrolls. These child rules are load-bearing, not decorative. */\n.ps-pipelines .inspector {\n  min-height: 0;\n  overflow-y: auto;\n}\n.ps-pipelines .inspector > * { flex: 0 0 auto; }\n.ps-pipelines .inspector .insp { position: static; }\n.ps-pipelines .ihead { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .ihead h3 { font-size: 14px; color: var(--mj-text-primary); margin: 0; }\n.ps-pipelines .ihead .tile {\n  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto; background: var(--ps-node-feature);\n}\n.ps-pipelines .ihead .tile[data-type='src'] { background: var(--ps-node-source); }\n.ps-pipelines .ihead .tile[data-type='emb'] { background: var(--ps-node-embedding); }\n.ps-pipelines .ihead .tile[data-type='target'] { background: var(--ps-node-target); }\n.ps-pipelines .ihead .tile[data-type='algo'] { background: var(--ps-node-algorithm); }\n.ps-pipelines .ihead .tile[data-type='output'] { background: var(--mj-status-success); }\n\n/* Palette chips are interactive buttons in the editor */\n.ps-pipelines .canvas-bar .ps-pchip { cursor: pointer; border: none; }\n.ps-pipelines .canvas-bar .ps-pchip:hover { filter: brightness(1.08); }\n\n/* Inspector edit fields */\n.ps-pipelines .ps-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.ps-pipelines .ps-field > label { font-size: 12px; font-weight: 650; color: var(--mj-text-muted); }\n.ps-pipelines .inputs-list { display: flex; flex-direction: column; gap: 4px; }\n.ps-pipelines .inp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mj-text-secondary); cursor: pointer; }\n\n/* Empty-state CTA spacing */\n.ps-pipelines .ps-empty button { margin-top: 16px; }\n"] }]
+  `, styles: ["/* ============================================================================\n   Predictive Studio \u2014 shared panel styles (design-token compliant)\n   Maps the mockup design system onto MemberJunction semantic --mj-* tokens.\n   Loaded by every PS panel component (styleUrls) under ViewEncapsulation.None,\n   so the class names are global within the PS dashboard subtree.\n   No hardcoded colors except the intentional categorical node/algorithm palette\n   (declared once as --ps-* custom props below) which must stay distinct across\n   light/dark to remain readable as diagram accents.\n   ============================================================================ */\n\n/* Categorical accents for DAG node types + algorithm chips. These are\n   data-visualization colors that must remain distinct regardless of theme\n   (allowed exception #3 in the design-token rules). */\n.ps-panel {\n  --ps-node-source: #6b7280;\n  --ps-node-feature: #2050c8;\n  --ps-node-embedding: #7b3ff0;\n  --ps-node-target: #1f9d57;\n  --ps-node-algorithm: #d98213;\n  /* budget-gauge categorical accents (reuse the node palette so light/dark stay distinct) */\n  --ps-gauge-cost: var(--ps-node-algorithm);\n  --ps-gauge-iterations: var(--ps-node-feature);\n}\n\n.ps-panel {\n  display: block;\n  height: 100%;\n}\n\n/* ---- generic layout helpers ---- */\n.ps-row { display: flex; gap: 16px; }\n.ps-col { display: flex; flex-direction: column; gap: 16px; }\n.ps-wrap { flex-wrap: wrap; }\n.ps-spacer { flex: 1; }\n.ps-muted { color: var(--mj-text-muted); }\n.ps-small { font-size: 12.5px; }\n.ps-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }\n.ps-section-title {\n  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;\n  color: var(--mj-text-muted); margin: 4px 0 2px; font-weight: 700;\n}\n\n/* ---- cards ---- */\n.ps-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n.ps-card-head {\n  display: flex; align-items: center; gap: 10px;\n  padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-card-head h3 { font-size: 14.5px; margin: 0; font-weight: 650; color: var(--mj-text-primary); }\n.ps-card-body { padding: 16px; }\n\n/* ---- KPI tiles ---- */\n.ps-kpi {\n  background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n  border-radius: 8px; padding: 16px 18px;\n}\n.ps-kpi .label { font-size: 12px; color: var(--mj-text-muted); font-weight: 600; }\n.ps-kpi .val { font-size: 26px; font-weight: 720; letter-spacing: -.02em; margin-top: 2px; color: var(--mj-text-primary); }\n\n/* ---- badges ---- */\n.ps-badge {\n  display: inline-flex; align-items: center; gap: 5px;\n  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.7;\n}\n.ps-badge.gray { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n.ps-badge.blue { background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.ps-badge.green { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.ps-badge.amber { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-badge.red { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }\n\n/* recommendation-level chips (the ranking matrix payoff) */\n.ps-lvl {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 92px; padding: 4px 10px; border-radius: 7px;\n  font-weight: 650; font-size: 11.5px; color: var(--mj-text-inverse);\n}\n.ps-lvl-Primary { background: var(--mj-status-success); }\n.ps-lvl-Strong { background: var(--mj-status-info); }\n.ps-lvl-Viable { background: var(--mj-status-warning); }\n.ps-lvl-Weak { background: var(--mj-text-disabled); }\n.ps-lvl-NotRecommended { background: var(--mj-bg-surface-sunken); color: var(--mj-text-muted); }\n\n/* ---- tags ---- */\n.ps-tag {\n  display: inline-block; padding: 2px 8px; border-radius: 6px;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary);\n  font-size: 11.5px; font-weight: 600;\n}\n.ps-tag.muted { opacity: .6; }\n.ps-divider { height: 1px; background: var(--mj-border-subtle); margin: 8px 0; }\n\n/* ---- tables ---- */\n.ps-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.ps-table th {\n  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 9px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.ps-table td { padding: 11px 12px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-primary); }\n.ps-table tr:hover td { background: var(--mj-bg-surface-hover); }\n.ps-table .num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.ps-rank {\n  width: 22px; height: 22px; border-radius: 6px; background: var(--mj-bg-surface-sunken);\n  display: inline-grid; place-items: center; font-weight: 700; font-size: 11.5px; color: var(--mj-text-secondary);\n}\n.ps-rank.gold { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n\n/* ---- progress bars ---- */\n.ps-bar { height: 8px; border-radius: 999px; background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mj-brand-primary); }\n.ps-bar.warn > span { background: var(--mj-status-warning); }\n.ps-bar.run > span { background: var(--mj-brand-primary); }\n\n.ps-fbar { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr 56px; align-items: center; gap: 14px; padding: 8px 0; }\n.ps-fbar + .ps-fbar { border-top: 1px solid var(--mj-border-subtle); }\n.ps-fbar .track { height: 10px; border-radius: var(--mj-radius-full); background: var(--mj-bg-surface-sunken); overflow: hidden; }\n.ps-fbar .track > span { display: block; height: 100%; border-radius: var(--mj-radius-full); background: var(--mj-brand-primary); }\n.ps-fbar .track > span.warn { background: var(--mj-status-warning); }\n.ps-fbar .name { color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ps-fbar > .ps-mono { text-align: right; color: var(--mj-text-secondary); font-variant-numeric: tabular-nums; }\n\n/* gauge */\n.ps-gauge {\n  position: relative; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;\n  background: conic-gradient(var(--ps-gauge-color, var(--mj-brand-primary)) calc(var(--ps-p, 40) * 1%), var(--mj-bg-surface-sunken) 0);\n  display: grid; place-items: center;\n}\n.ps-gauge::after { content: ''; position: absolute; inset: 9px; background: var(--mj-bg-surface); border-radius: 50%; }\n.ps-gauge .g-val { position: relative; font-weight: 720; font-size: 14px; color: var(--mj-text-primary); }\n\n/* warning / info callouts */\n.ps-callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }\n.ps-callout.warn { background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); color: var(--mj-status-warning-text); }\n.ps-callout.info { background: var(--mj-status-info-bg); border-color: var(--mj-status-info-border); color: var(--mj-status-info-text); }\n.ps-callout.success { background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); color: var(--mj-status-success-text); }\n.ps-callout i { font-size: 16px; margin-top: 1px; }\n\n/* lifecycle stepper */\n.ps-stepper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.ps-step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); }\n.ps-step .pip {\n  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mj-border-strong);\n  display: grid; place-items: center; font-size: 11px;\n}\n.ps-step.done { color: var(--mj-status-success-text); }\n.ps-step.done .pip { background: var(--mj-status-success); border-color: var(--mj-status-success); color: var(--mj-text-inverse); }\n.ps-step.curr { color: var(--mj-brand-primary); }\n.ps-step.curr .pip { border-color: var(--mj-brand-primary); color: var(--mj-brand-primary); }\n.ps-step .ln { width: 26px; height: 2px; background: var(--mj-border-strong); }\n\n/* ---- DAG flow canvas ---- */\n.ps-flow {\n  position: relative;\n  background:\n    linear-gradient(var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    linear-gradient(90deg, var(--mj-border-subtle) 1px, transparent 1px) 0 0 / 22px 22px,\n    var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default); border-radius: 10px;\n  min-height: 620px; overflow: hidden;\n}\n.ps-node {\n  position: absolute; width: 190px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong); border-left-width: 3px; border-radius: 8px;\n  cursor: pointer;\n}\n.ps-node .nh {\n  display: flex; align-items: center; gap: 8px; padding: 9px 11px;\n  border-bottom: 1px solid var(--mj-border-subtle); font-weight: 650; font-size: 12.5px; color: var(--mj-text-primary);\n}\n.ps-node .nh i.tile {\n  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 12px; flex: 0 0 auto;\n}\n.ps-node .nh .ps-tag { margin-left: auto; }\n.ps-node .nb { padding: 9px 11px; font-size: 12px; color: var(--mj-text-secondary); }\n.ps-node .nb-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }\n.ps-node .nb-row .k { color: var(--mj-text-muted); }\n.ps-node.src { border-left-color: var(--ps-node-source); }\n.ps-node.src .nh i.tile { background: var(--ps-node-source); }\n.ps-node.feat { border-left-color: var(--ps-node-feature); }\n.ps-node.feat .nh i.tile { background: var(--ps-node-feature); }\n.ps-node.emb { border-left-color: var(--ps-node-embedding); }\n.ps-node.emb .nh i.tile { background: var(--ps-node-embedding); }\n.ps-node.target { border-left-color: var(--ps-node-target); }\n.ps-node.target .nh i.tile { background: var(--ps-node-target); }\n.ps-node.algo { border-left-color: var(--ps-node-algorithm); }\n.ps-node.algo .nh i.tile { background: var(--ps-node-algorithm); }\n.ps-node.output { border-left-color: var(--mj-status-success); }\n.ps-node.output .nh i.tile { background: var(--mj-status-success); }\n.ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.ps-node .port {\n  position: absolute; width: 11px; height: 11px; border-radius: 50%;\n  background: var(--mj-bg-surface); border: 2px solid var(--mj-brand-primary);\n  top: 50%; transform: translateY(-50%);\n}\n.ps-node .port.in { left: -6px; }\n.ps-node .port.out { right: -6px; }\nsvg.ps-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\nsvg.ps-edges path { stroke: color-mix(in srgb, var(--mj-brand-primary) 45%, transparent); stroke-width: 2; fill: none; }\n\n/* palette chips */\n.ps-pchip {\n  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px;\n  border: 1px dashed var(--mj-border-strong); background: var(--mj-bg-surface);\n  font-size: 12.5px; font-weight: 600; color: var(--mj-text-secondary); cursor: grab;\n}\n.ps-pchip i { font-size: 12px; color: var(--mj-text-inverse); width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; }\n.ps-pchip.s i { background: var(--ps-node-source); }\n.ps-pchip.f i { background: var(--ps-node-feature); }\n.ps-pchip.e i { background: var(--ps-node-embedding); }\n.ps-pchip.t i { background: var(--ps-node-target); }\n.ps-pchip.a i { background: var(--ps-node-algorithm); }\n\n/* segmented control */\n.ps-seg { display: inline-flex; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.ps-seg button {\n  border: none; background: var(--mj-bg-surface); color: var(--mj-text-secondary);\n  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;\n  border-right: 1px solid var(--mj-border-default);\n}\n.ps-seg button:last-child { border-right: none; }\n.ps-seg button.on { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n/* field control */\n.ps-field { margin-bottom: 14px; }\n.ps-field > label {\n  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; margin-bottom: 6px;\n}\n.ps-input {\n  width: 100%; padding: 8px 10px; border: 1px solid var(--mj-border-default);\n  border-radius: 6px; font-size: 13px; background: var(--mj-bg-surface); color: var(--mj-text-primary);\n  box-sizing: border-box;\n}\n.ps-input:focus { outline: none; border-color: var(--mj-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); }\n\n/* loading container */\n.ps-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; }\n\n/* ---- empty / prompt states ---- */\n.ps-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; gap: 10px; padding: 56px 24px; color: var(--mj-text-muted);\n}\n.ps-empty .ps-empty-ico {\n  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;\n  background: var(--mj-bg-surface-sunken); color: var(--mj-text-disabled); font-size: 24px;\n}\n.ps-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--mj-text-secondary); }\n.ps-empty p { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.5; }\n\n/* ---- confirm modal ---- */\n.ps-modal-backdrop {\n  position: fixed; inset: 0; z-index: 1000;\n  background: var(--mj-bg-overlay);\n  display: flex; align-items: center; justify-content: center; padding: 24px;\n}\n.ps-modal {\n  width: 100%; max-width: 480px; background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default); border-radius: 14px;\n  box-shadow: var(--mj-shadow-lg, var(--mj-shadow-sm)); overflow: hidden;\n}\n.ps-modal-head {\n  display: flex; align-items: center; gap: 12px; padding: 18px 20px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n.ps-modal-head .ico {\n  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;\n  font-size: 16px; flex: 0 0 auto;\n  background: var(--mj-status-info-bg); color: var(--mj-status-info-text);\n}\n.ps-modal-head.warn .ico { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.ps-modal-head.danger .ico { background: var(--mj-status-error-bg); color: var(--mj-status-error-text); }\n.ps-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--mj-text-primary); }\n.ps-modal-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mj-text-secondary); }\n.ps-modal-body .ps-field { margin-top: 14px; margin-bottom: 0; }\n.ps-modal-foot {\n  display: flex; align-items: center; gap: 10px; padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card);\n}\n.ps-modal-foot .ps-spacer { flex: 1; }\n", "/* Training Pipelines \u2014 Human-Centric Master-Detail Redesign with Progressive Stages & DAG toggle */\n\n.ps-pipelines {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Master-Detail Layout with Resizable Splitter */\n.ps-pipelines .pl-layout {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  position: relative;\n}\n\n.ps-pipelines .pl-splitter {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-page);\n}\n\n.ps-pipelines .pl-collapsed-strip {\n  width: 44px;\n  flex: 0 0 44px;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n  z-index: 10;\n}\n\n.ps-pipelines .pl-rail-collapse {\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-sm);\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.ps-pipelines .pl-collapsed-strip-label {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  margin-top: 8px;\n}\n\n.ps-pipelines .pl-collapse-btn {\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-sm);\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-collapse-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.ps-pipelines .pl-model-row {\n  cursor: pointer;\n  transition: background 0.12s ease;\n}\n\n.ps-pipelines .pl-model-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ps-pipelines .pl-model-link {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.ps-pipelines .pl-model-link:hover {\n  text-decoration: underline;\n}\n\n.ps-pipelines .pl-action-icon-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  width: 28px;\n  height: 28px;\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.12s ease;\n}\n\n.ps-pipelines .pl-action-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-brand-primary);\n}\n\n/* Left Column: Pipeline Catalog */\n.ps-pipelines .pl-catalog {\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  height: 100%;\n}\n\n.ps-pipelines .pl-catalog-header {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .pl-catalog-title-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.ps-pipelines .pl-catalog-title-row h2 {\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-search-box {\n  position: relative;\n  width: 100%;\n}\n\n.ps-pipelines .pl-search-box input {\n  width: 100%;\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 7px 10px 7px 30px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  outline: none;\n}\n\n.ps-pipelines .pl-search-box i {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.ps-pipelines .pl-filter-chips {\n  display: flex;\n  gap: 6px;\n  overflow-x: auto;\n  padding-bottom: 2px;\n}\n\n.ps-pipelines .pl-filter-chip {\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  padding: 3px 8px;\n  border-radius: 9999px;\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.ps-pipelines .pl-filter-chip.active {\n  background: var(--mj-bg-surface-subtle);\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Catalog Pipeline Cards List (data-testid=\"ps-pipelines-picker\") */\n.ps-pipelines .pl-picker {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n/* Individual Card (data-testid=\"ps-pipelines-pill\") */\n.ps-pipelines .pl-pill.pipeline-card {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 6px;\n  width: 100%;\n  max-width: none;\n  border-radius: 8px;\n  padding: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.ps-pipelines .pl-pill.pipeline-card:hover {\n  border-color: var(--mj-border-subtle);\n  background: var(--mj-bg-surface-hover);\n}\n\n.ps-pipelines .pl-pill.pipeline-card.on {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.ps-pipelines .pl-card-top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.ps-pipelines .pl-card-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: normal;\n}\n\n.ps-pipelines .pl-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-entity-tag {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n}\n\n.ps-pipelines .pl-target-tag {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-metric-badge {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n/* Right Detail Workspace */\n.ps-pipelines .pl-workspace {\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow-y: auto;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n}\n\n.ps-pipelines .pl-workspace-header {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 16px 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .pl-workspace-title-area {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.ps-pipelines .pl-breadcrumbs {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-breadcrumbs span {\n  color: var(--mj-text-secondary);\n}\n\n.ps-pipelines .pl-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .pl-title-row h1 {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  border: none;\n}\n\n/* Workspace Stages Body */\n.ps-pipelines .pl-stages-body {\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 1400px;\n}\n\n.ps-pipelines .pl-stage-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  padding: 18px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n\n.ps-pipelines .pl-stage-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ps-pipelines .pl-stage-title-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .pl-stage-num {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary-subtle);\n  color: var(--mj-brand-primary);\n  display: grid;\n  place-items: center;\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.ps-pipelines .pl-stage-title-left h3 {\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.ps-pipelines .pl-stage-subtitle {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Stage Grids */\n.ps-pipelines .pl-grid-4 {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 12px;\n}\n\n.ps-pipelines .pl-grid-3 {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 1200px) {\n  .ps-pipelines .pl-grid-4 { grid-template-columns: repeat(2, 1fr); }\n  .ps-pipelines .pl-grid-3 { grid-template-columns: 1fr; }\n}\n\n.ps-pipelines .pl-metric-box {\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.ps-pipelines .pl-metric-box label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.ps-pipelines .pl-metric-box .val {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .pl-metric-box .sub {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n/* Feature Group Cards */\n.ps-pipelines .pl-feature-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.ps-pipelines .pl-fg-head {\n  padding: 10px 12px;\n  background: var(--mj-bg-surface-subtle);\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12.5px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-fg-body {\n  padding: 10px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.ps-pipelines .pl-feature-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 5px 8px;\n  background: var(--mj-bg-surface-subtle);\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-feature-name {\n  font-family: monospace;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-feature-card {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n  padding: 6px 8px;\n  background: var(--mj-bg-surface-subtle);\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-subtle);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .pl-feature-card:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-default);\n}\n\n.ps-pipelines .pl-feature-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.ps-pipelines .pl-col-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-top: 2px;\n}\n\n.ps-pipelines .pl-col-chip {\n  font-family: monospace;\n  font-size: 11px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-border-default);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.ps-pipelines .pl-step-inputs {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 2px;\n}\n\n/* Leakage Guard Box */\n.ps-pipelines .pl-leakage-box {\n  background: var(--mj-status-warning-subtle);\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n  border-radius: 8px;\n  padding: 12px 14px;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.ps-pipelines .pl-leakage-box i {\n  color: var(--mj-status-warning);\n  font-size: 18px;\n  margin-top: 2px;\n}\n\n.ps-pipelines .pl-deny-chip {\n  font-family: monospace;\n  font-size: 11px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  padding: 2px 6px;\n  border-radius: 4px;\n  text-decoration: line-through;\n  display: inline-block;\n  margin-right: 4px;\n  margin-top: 4px;\n}\n\n/* Leaderboard Table */\n.ps-pipelines .pl-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.ps-pipelines .pl-table th {\n  text-align: left;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface-subtle);\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.ps-pipelines .pl-table td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .pl-table tr.winner-row {\n  background: var(--mj-brand-primary-subtle);\n  font-weight: 600;\n}\n\n/* Serving Box */\n.ps-pipelines .pl-serving-box {\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  gap: 12px;\n}\n\n@media (max-width: 900px) {\n  .ps-pipelines .pl-serving-box { grid-template-columns: 1fr; }\n}\n\n/* Pipeline Graph view & inspector container when isGraphView is active */\n.ps-pipelines .builder {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n}\n\n.ps-pipelines .builder-splitter {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: transparent;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter {\n  background: transparent;\n  transition: background-color 0.15s ease;\n  position: relative;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter:hover {\n  background-color: var(--mj-brand-primary, #6366f1);\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 2px;\n  height: 24px;\n  border-radius: 1px;\n  background: var(--mj-border-strong, #cbd5e1);\n  transition: background-color 0.15s ease;\n}\n\n.ps-pipelines .builder-splitter .as-split-gutter:hover::after {\n  background: var(--mj-bg-surface);\n}\n\n.ps-pipelines .insp-collapse-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  padding: 0;\n}\n\n.ps-pipelines .insp-collapse-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n.ps-pipelines .canvas-wrap {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n  overflow: hidden;\n}\n\n.ps-pipelines .canvas-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-wrap: wrap;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 10px 16px;\n  z-index: 5;\n}\n\n.ps-pipelines .canvas-bar-left,\n.ps-pipelines .canvas-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.ps-pipelines .ps-zoom-controls {\n  display: flex;\n  align-items: center;\n  background: var(--mj-bg-surface-subtle);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  overflow: hidden;\n}\n\n.ps-pipelines .ps-icon-btn {\n  background: none;\n  border: none;\n  padding: 5px 8px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  font-size: 11px;\n}\n\n.ps-pipelines .ps-icon-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.ps-pipelines .ps-icon-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.ps-pipelines .ps-zoom-label {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: monospace;\n  padding: 0 6px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.ps-pipelines .ps-node-count {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .ps-flow.big {\n  border: none;\n  border-radius: 0;\n  flex: 1 1 auto;\n  min-height: 0;\n  max-width: 100%;\n  overflow: auto;\n  position: relative;\n  background:\n    radial-gradient(var(--mj-border-default) 1px, transparent 1px) 0 0 / 24px 24px,\n    var(--mj-bg-surface-card);\n}\n\n.ps-pipelines .ps-graph-viewport {\n  position: relative;\n  transform-origin: 0 0;\n  transition: transform 0.15s ease-out;\n}\n\n.ps-pipelines .ps-graph-edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  overflow: visible;\n}\n\n.ps-pipelines .ps-edge-path {\n  stroke: var(--mj-border-strong);\n  stroke-width: 2;\n  fill: none;\n  transition: stroke 0.15s ease, stroke-width 0.15s ease;\n}\n\n.ps-pipelines .ps-edge-path.active {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 2.5;\n}\n\n.ps-pipelines .ps-node {\n  position: absolute;\n  width: 230px;\n  height: 96px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left-width: 4px;\n  border-radius: 8px;\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.ps-pipelines .ps-node:hover {\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n  transform: translateY(-1px);\n}\n\n.ps-pipelines .ps-node.selected {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.ps-pipelines .ps-node .nh {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  min-height: 36px;\n}\n\n.ps-pipelines .ps-node .nh i.tile {\n  width: 24px;\n  height: 24px;\n  border-radius: 6px;\n  display: grid;\n  place-items: center;\n  color: var(--mj-text-inverse);\n  font-size: 11px;\n  flex: 0 0 auto;\n}\n\n.ps-pipelines .ps-node-title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ps-pipelines .ps-node .nh .ps-tag {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 5px;\n  border-radius: 4px;\n  background: var(--mj-bg-surface-subtle);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n\n.ps-pipelines .ps-node .nb {\n  padding: 6px 10px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 3px;\n  font-size: 11px;\n}\n\n.ps-pipelines .ps-node .nb-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.ps-pipelines .ps-node .nb-row .k {\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.ps-pipelines .ps-node .nb-row .v {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  font-family: monospace;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Ports */\n.ps-pipelines .ps-node .port {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-strong);\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n  transition: all 0.15s ease;\n}\n\n.ps-pipelines .ps-node .port.in { left: -6px; }\n.ps-pipelines .ps-node .port.out { right: -6px; }\n\n.ps-pipelines .ps-node.selected .port {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n}\n\n/* Node Category Accents \u2014 fallback hex values are the intended definitions; hosts may override them externally without a :root block here */\n.ps-pipelines .ps-node.src { border-left-color: var(--ps-node-src, #0284c7); }\n.ps-pipelines .ps-node.src .nh i.tile { background: var(--ps-node-src, #0284c7); }\n\n.ps-pipelines .ps-node.feat { border-left-color: var(--ps-node-feat, #7c3aed); }\n.ps-pipelines .ps-node.feat .nh i.tile { background: var(--ps-node-feat, #7c3aed); }\n\n.ps-pipelines .ps-node.emb { border-left-color: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .ps-node.emb .nh i.tile { background: var(--ps-node-emb, #4f46e5); }\n\n.ps-pipelines .ps-node.target { border-left-color: var(--ps-node-target, #059669); }\n.ps-pipelines .ps-node.target .nh i.tile { background: var(--ps-node-target, #059669); }\n\n.ps-pipelines .ps-node.algo { border-left-color: var(--ps-node-algo, #d97706); }\n.ps-pipelines .ps-node.algo .nh i.tile { background: var(--ps-node-algo, #d97706); }\n\n.ps-pipelines .ps-node.output { border-left-color: var(--ps-node-output, #16a34a); }\n.ps-pipelines .ps-node.output .nh i.tile { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  background: var(--mj-bg-surface);\n  border-top: 1px solid var(--mj-border-default);\n  padding: 8px 16px;\n  z-index: 5;\n}\n\n.ps-pipelines .legend {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  flex-wrap: wrap;\n}\n\n.ps-pipelines .legend span {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.ps-pipelines .legend .sw {\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  display: inline-block;\n}\n\n.ps-pipelines .legend .sw.src { background: var(--ps-node-src, #0284c7); }\n.ps-pipelines .legend .sw.feat { background: var(--ps-node-feat, #7c3aed); }\n.ps-pipelines .legend .sw.emb { background: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .legend .sw.target { background: var(--ps-node-target, #059669); }\n.ps-pipelines .legend .sw.algo { background: var(--ps-node-algo, #d97706); }\n.ps-pipelines .legend .sw.output { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .inspector {\n  height: 100%;\n  min-height: 0;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ps-pipelines .inspector > * { flex: 0 0 auto; }\n.ps-pipelines .inspector .insp { position: static; border: none; background: transparent; }\n.ps-pipelines .ihead { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--mj-border-subtle); }\n.ps-pipelines .ihead h3 { font-size: 14px; color: var(--mj-text-primary); margin: 0; }\n.ps-pipelines .ihead .tile {\n  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto; background: var(--ps-node-feat, #7c3aed);\n}\n.ps-pipelines .ihead .tile[data-type='src'] { background: var(--ps-node-src, #0284c7); }\n.ps-pipelines .ihead .tile[data-type='emb'] { background: var(--ps-node-emb, #4f46e5); }\n.ps-pipelines .ihead .tile[data-type='target'] { background: var(--ps-node-target, #059669); }\n.ps-pipelines .ihead .tile[data-type='algo'] { background: var(--ps-node-algo, #d97706); }\n.ps-pipelines .ihead .tile[data-type='output'] { background: var(--ps-node-output, #16a34a); }\n\n.ps-pipelines .canvas-bar .ps-pchip { cursor: pointer; border: none; }\n.ps-pipelines .canvas-bar .ps-pchip:hover { filter: brightness(1.08); }\n.ps-pipelines .ps-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }\n.ps-pipelines .ps-field > label { font-size: 12px; font-weight: 650; color: var(--mj-text-muted); }\n.ps-pipelines .inputs-list { display: flex; flex-direction: column; gap: 4px; }\n.ps-pipelines .inp-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mj-text-secondary); cursor: pointer; }\n.ps-pipelines .ps-empty button { margin-top: 16px; }\n"] }]
     }], null, { engine: [{
             type: Input
         }], provider: [{
@@ -1599,6 +3308,10 @@ export class PSPipelinesComponent {
             type: Input
         }], askAgent: [{
             type: Output
+        }], navigate: [{
+            type: Output
+        }], viewMode: [{
+            type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSPipelinesComponent, { className: "PSPipelinesComponent", filePath: "src/PredictiveStudio/components/ps-pipelines.component.ts", lineNumber: 313 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSPipelinesComponent, { className: "PSPipelinesComponent", filePath: "src/PredictiveStudio/components/ps-pipelines.component.ts", lineNumber: 790 }); })();
 //# sourceMappingURL=ps-pipelines.component.js.map