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

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

@@ -1,20 +1,23 @@
 import { ChangeDetectorRef, Component, Input, ViewEncapsulation, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { AngularSplitModule } from 'angular-split';
 import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
 import { MJButtonDirective } from '@memberjunction/ng-ui-components';
 import { RunView } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { primaryAuc } from '../predictive-studio.view-models';
+import { primaryModelScore, formatMetricValue } from '../predictive-studio.view-models';
 import { humanizeCron } from '../production-distribution';
 import { PSOperateDialogComponent } from './ps-operate-dialog.component';
+import { PSPredictionsGridComponent } from './ps-predictions-grid.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "@angular/common";
+import * as i1 from "angular-split";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.modelId;
 const _forTrack1 = ($index, $item) => $item.id;
-const _forTrack2 = ($index, $item) => $item.recordId;
-const _forTrack3 = ($index, $item) => $item.ID;
+const _forTrack2 = ($index, $item) => $item.ID;
 function PSProductionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "span", 2);
     i0.ɵɵelement(2, "i", 3);
@@ -26,48 +29,213 @@ function PSProductionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(6, " When you publish a trained model in the Model Registry it shows up here \u2014 ready to schedule, bind to a column, and run. Train a pipeline and promote the model to Published to get started. ");
     i0.ɵɵelementEnd()();
 } }
-function PSProductionComponent_Conditional_2_For_30_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_For_30_Template_div_click_0_listener() { const m_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.select(m_r3.modelId)); });
-    i0.ɵɵelementStart(1, "div", 33);
+function PSProductionComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 32)(2, "div", 33);
+    i0.ɵɵtext(3, "Published");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 34);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 32)(7, "div", 33);
+    i0.ɵɵtext(8, "Scheduled");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 34);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 32)(12, "div", 33);
+    i0.ɵɵtext(13, "Bound (write-back)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 34);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 32)(17, "div", 33);
+    i0.ɵɵtext(18, "Idle");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 34);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.models.length);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.scheduledModelCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.boundModelCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.idleModelCount);
+} }
+function PSProductionComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "button", 35);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleList()); });
+    i0.ɵɵelement(2, "i", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 37);
+    i0.ɵɵelement(4, "i", 3);
+    i0.ɵɵelementEnd()();
+} }
+function PSProductionComponent_Conditional_2_Conditional_4_For_12_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_4_For_12_Template_div_click_0_listener() { const m_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.select(m_r6.modelId)); });
+    i0.ɵɵelementStart(1, "div", 46);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 34)(4, "div", 35);
+    i0.ɵɵelementStart(3, "div", 47)(4, "div", 48);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 36);
+    i0.ɵɵelementStart(6, "div", 49);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 37)(9, "span", 22);
+    i0.ɵɵelementStart(8, "div", 50)(9, "span", 51);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 38);
+    i0.ɵɵelementStart(11, "div", 52);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const m_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("sel", m_r3.modelId === ctx_r3.selectedModelId);
+    const m_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("sel", m_r6.modelId === ctx_r1.selectedModelId);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("st-" + m_r3.deployState);
+    i0.ɵɵclassMap("st-" + m_r6.deployState);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r3.deployIcon(m_r3.deployState));
+    i0.ɵɵclassMap(ctx_r1.deployIcon(m_r6.deployState));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(m_r3.label);
+    i0.ɵɵtextInterpolate(m_r6.label);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("v", m_r3.version, " \u00B7 ", m_r3.algorithm);
+    i0.ɵɵtextInterpolate2("v", m_r6.version, " \u00B7 ", m_r6.algorithm);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r3.deployBadge(m_r3.deployState));
+    i0.ɵɵclassMap(ctx_r1.deployBadge(m_r6.deployState));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.deployLabel(m_r6.deployState));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(m_r6.holdoutMetric);
+} }
+function PSProductionComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "as-split-area", 8)(1, "div", 38)(2, "div", 25)(3, "h3");
+    i0.ɵɵtext(4, "Published models");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 39)(6, "span", 40);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 41);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleList()); });
+    i0.ɵɵelement(9, "i", 42);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 43);
+    i0.ɵɵrepeaterCreate(11, PSProductionComponent_Conditional_2_Conditional_4_For_12_Template, 13, 13, "div", 44, _forTrack0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("size", ctx_r1.listSizePct)("minSize", 18)("maxSize", 50);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.models.length);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.models);
+} }
+function PSProductionComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 53);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47)(4, "h2", 54);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(6, "span", 55);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 56);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "span", 51);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 57);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_8_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.operateOpen = true); });
+    i0.ɵɵelement(13, "i", 58);
+    i0.ɵɵtext(14, " Operate ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "button", 59);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_8_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleHeaderCollapse()); });
+    i0.ɵɵelement(16, "i", 60);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("st-" + ctx_r1.selected.deployState);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r3.deployLabel(m_r3.deployState));
+    i0.ɵɵclassMap(ctx_r1.deployIcon(ctx_r1.selected.deployState));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.selected.label, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(m_r3.holdoutMetric);
+    i0.ɵɵtextInterpolate1("v", ctx_r1.selected.version);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate3("", ctx_r1.selected.algorithm, " \u00B7 ", ctx_r1.selected.problemType, " \u00B7 holdout ", ctx_r1.selected.holdoutMetric);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.deployBadge(ctx_r1.selected.deployState));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.deployLabel(ctx_r1.selected.deployState));
 } }
-function PSProductionComponent_Conditional_2_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "i", 39);
-    i0.ɵɵelementStart(2, "div", 40);
+function PSProductionComponent_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_9_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleHeaderCollapse()); });
+    i0.ɵɵelementStart(1, "div", 62);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 63)(4, "strong");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 64);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 18);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "span", 51);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 65);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_9_Template_button_click_12_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.operateOpen = true); });
+    i0.ɵɵelement(13, "i", 58);
+    i0.ɵɵtext(14, " Operate ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "button", 66);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_9_Template_button_click_15_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleHeaderCollapse()); });
+    i0.ɵɵelement(16, "i", 67);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("st-" + ctx_r1.selected.deployState);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.deployIcon(ctx_r1.selected.deployState));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.selected.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("v", ctx_r1.selected.version);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("\u00B7 ", ctx_r1.selected.algorithm);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.deployBadge(ctx_r1.selected.deployState));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.deployLabel(ctx_r1.selected.deployState));
+} }
+function PSProductionComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 19);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r1.selectedBindings[0].targetEntity, ".", ctx_r1.selectedBindings[0].targetColumn);
+} }
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelementStart(2, "div", 70);
     i0.ɵɵtext(3, "This model is published but ");
     i0.ɵɵelementStart(4, "strong");
     i0.ɵɵtext(5, "not operating");
@@ -79,209 +247,172 @@ function PSProductionComponent_Conditional_2_Conditional_55_Template(rf, ctx) {
     i0.ɵɵtext(9, " above to run it now, schedule it to run regularly, or write predictions back to a column.");
     i0.ɵɵelementEnd()();
 } }
-function PSProductionComponent_Conditional_2_Conditional_56_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "i", 43);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 40)(4, "strong");
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "div", 74)(3, "div", 70)(4, "strong");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 25);
+    i0.ɵɵelementStart(7, "div", 18);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 22);
+    i0.ɵɵelementStart(9, "span", 51);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const b_r5 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(4);
+    const b_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(b_r5.targetEntity);
+    i0.ɵɵtextInterpolate(b_r9.targetEntity);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(".", b_r5.targetColumn);
+    i0.ɵɵtextInterpolate1(".", b_r9.targetColumn);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", b_r5.mode, "", b_r5.schedulePhrase ? " \u00B7 " + b_r5.schedulePhrase : "");
+    i0.ɵɵtextInterpolate2("", b_r9.mode, "", b_r9.schedulePhrase ? " \u00B7 " + b_r9.schedulePhrase : "");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r3.modeBadge(b_r5.mode));
+    i0.ɵɵclassMap(ctx_r1.modeBadge(b_r9.mode));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(b_r5.mode);
+    i0.ɵɵtextInterpolate(b_r9.mode);
 } }
-function PSProductionComponent_Conditional_2_Conditional_56_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71);
     i0.ɵɵtext(1, "Scoring bindings");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(2, PSProductionComponent_Conditional_2_Conditional_56_Conditional_0_For_3_Template, 11, 7, "div", 42, _forTrack1);
+    i0.ɵɵrepeaterCreate(2, PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_0_For_3_Template, 11, 7, "div", 72, _forTrack1);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r3.selectedBindings);
+    i0.ɵɵrepeater(ctx_r1.selectedBindings);
 } }
-function PSProductionComponent_Conditional_2_Conditional_56_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 29);
     i0.ɵɵtext(1, "Scheduled to run, writing generic output to the process run history (no write-back column).");
     i0.ɵɵelementEnd();
 } }
-function PSProductionComponent_Conditional_2_Conditional_56_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 44);
-    i0.ɵɵelementStart(1, "div", 45)(2, "span", 25);
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 75);
+    i0.ɵɵelementStart(1, "div", 76)(2, "span", 18);
     i0.ɵɵtext(3, "Last scored");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 40);
+    i0.ɵɵelementStart(4, "span", 70);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind2(6, 2, ctx_r3.selected.lastScoredAt, "medium"), "", ctx_r3.selected.lastRowCount != null ? " \u00B7 " + ctx_r3.selected.lastRowCount + " rows" : "");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind2(6, 2, ctx_r1.selected.lastScoredAt, "medium"), "", ctx_r1.selected.lastRowCount != null ? " \u00B7 " + ctx_r1.selected.lastRowCount + " rows" : "");
 } }
-function PSProductionComponent_Conditional_2_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, PSProductionComponent_Conditional_2_Conditional_56_Conditional_0_Template, 4, 0)(1, PSProductionComponent_Conditional_2_Conditional_56_Conditional_1_Template, 2, 0, "div", 29);
-    i0.ɵɵconditionalCreate(2, PSProductionComponent_Conditional_2_Conditional_56_Conditional_2_Template, 7, 5);
+function PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_0_Template, 4, 0)(1, PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_1_Template, 2, 0, "div", 29);
+    i0.ɵɵconditionalCreate(2, PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Conditional_2_Template, 7, 5);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r3.selectedBindings.length > 0 ? 0 : 1);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r1.selectedBindings.length > 0 ? 0 : 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r3.selected.lastScoredAt ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.selected.lastScoredAt ? 2 : -1);
 } }
-function PSProductionComponent_Conditional_2_Conditional_64_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 48);
-} }
-function PSProductionComponent_Conditional_2_Conditional_64_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵtext(1, "No per-record predictions recorded for this run.");
-    i0.ɵɵelementEnd();
-} }
-function PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_For_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
-    i0.ɵɵtext(1);
+function PSProductionComponent_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵconditionalCreate(1, PSProductionComponent_Conditional_2_Conditional_22_Conditional_1_Template, 10, 0, "div", 68)(2, PSProductionComponent_Conditional_2_Conditional_22_Conditional_2_Template, 3, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const d_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" \u00B7 ", d_r7.class);
+    i0.ɵɵconditional(ctx_r1.selected.deployState === "idle" ? 1 : 2);
 } }
-function PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 50);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td")(4, "span", 22);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 51);
-    i0.ɵɵtext(7);
-    i0.ɵɵconditionalCreate(8, PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_For_13_Conditional_8_Template, 2, 1, "span", 52);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td", 29);
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "date");
-    i0.ɵɵelementEnd()();
+function PSProductionComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16)(1, "button", 77);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_31_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleRunFocus()); });
+    i0.ɵɵelement(2, "i", 22);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const d_r7 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(d_r7.recordId);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r3.runBadge(d_r7.status));
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(d_r7.status);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(d_r7.score);
+    i0.ɵɵclassProp("active", ctx_r1.isRunFocused);
+    i0.ɵɵproperty("title", ctx_r1.isRunFocused ? "Exit focus (expand header & deployment)" : "Focus mode (collapse header & deployment)");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(d_r7.class ? 8 : -1);
+    i0.ɵɵclassProp("fa-compress", ctx_r1.isRunFocused)("fa-expand", !ctx_r1.isRunFocused);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(d_r7.scoredAt ? i0.ɵɵpipeBind2(11, 7, d_r7.scoredAt, "short") : "\u2014");
+    i0.ɵɵtextInterpolate(ctx_r1.isRunFocused ? "Exit Focus" : "Focus");
 } }
-function PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "table", 49)(1, "thead")(2, "tr")(3, "th");
-    i0.ɵɵtext(4, "Record");
+function PSProductionComponent_Conditional_2_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 78)(1, "button", 79);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_33_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeRun()); });
+    i0.ɵɵelement(2, "i", 80);
+    i0.ɵɵtext(3, " All runs ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "th");
-    i0.ɵɵtext(6, "Status");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th");
-    i0.ɵɵtext(8, "Prediction");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th");
-    i0.ɵɵtext(10, "Scored");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "tbody");
-    i0.ɵɵrepeaterCreate(12, PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_For_13_Template, 12, 10, "tr", null, _forTrack2);
+    i0.ɵɵelementStart(4, "span", 64);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
+    i0.ɵɵelement(6, "ps-predictions-grid", 81);
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(12);
-    i0.ɵɵrepeater(ctx_r3.runDetails);
-} }
-function PSProductionComponent_Conditional_2_Conditional_64_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 46);
-    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_64_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.closeRun()); });
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵtext(2, " All runs ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, PSProductionComponent_Conditional_2_Conditional_64_Conditional_3_Template, 1, 0, "mj-loading", 48)(4, PSProductionComponent_Conditional_2_Conditional_64_Conditional_4_Template, 2, 0, "div", 29)(5, PSProductionComponent_Conditional_2_Conditional_64_Conditional_5_Template, 14, 0, "table", 49);
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r3.loadingDetails ? 3 : ctx_r3.runDetails.length === 0 ? 4 : 5);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Run: ", ctx_r1.selectedRunId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("modelId", ctx_r1.selected.modelId)("runId", ctx_r1.selectedRunId)("entityName", ctx_r1.selectedTargetEntityName)("problemType", ctx_r1.selected.problemType)("title", ctx_r1.selected.label + " \u2014 Run Predictions")("height", ctx_r1.runGridHeight);
 } }
-function PSProductionComponent_Conditional_2_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+function PSProductionComponent_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 28);
 } }
-function PSProductionComponent_Conditional_2_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+function PSProductionComponent_Conditional_2_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 29);
     i0.ɵɵtext(1, "No runs recorded yet. Each time this model runs as a Record Process, its predictions are saved to the process run history \u2014 even without a scoring binding.");
     i0.ɵɵelementEnd();
 } }
-function PSProductionComponent_Conditional_2_Conditional_67_For_14_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 56);
+function PSProductionComponent_Conditional_2_Conditional_36_For_14_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
     i0.ɵɵtext(1, "dry run");
     i0.ɵɵelementEnd();
 } }
-function PSProductionComponent_Conditional_2_Conditional_67_For_14_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 54);
-    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_67_For_14_Template_tr_click_0_listener() { const r_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.openRun(r_r9.ID)); });
+function PSProductionComponent_Conditional_2_Conditional_36_For_14_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 83);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Conditional_36_For_14_Template_tr_click_0_listener() { const r_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRun(r_r13.ID)); });
     i0.ɵɵelementStart(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "td")(5, "span", 22);
+    i0.ɵɵelementStart(4, "td")(5, "span", 51);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "td", 51);
+    i0.ɵɵelementStart(7, "td", 84);
     i0.ɵɵtext(8);
-    i0.ɵɵelementStart(9, "span", 52);
+    i0.ɵɵelementStart(9, "span", 85);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(11, "td", 29);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "td", 55);
-    i0.ɵɵconditionalCreate(14, PSProductionComponent_Conditional_2_Conditional_67_For_14_Conditional_14_Template, 2, 0, "span", 56);
-    i0.ɵɵelement(15, "i", 57);
+    i0.ɵɵelementStart(13, "td", 86);
+    i0.ɵɵconditionalCreate(14, PSProductionComponent_Conditional_2_Conditional_36_For_14_Conditional_14_Template, 2, 0, "span", 87);
+    i0.ɵɵelement(15, "i", 88);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const r_r9 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext(3);
+    const r_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 8, r_r9.StartTime || r_r9.CreatedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 8, r_r13.StartTime || r_r13.CreatedAt, "short"));
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r3.runBadge(r_r9.Status));
+    i0.ɵɵclassMap(ctx_r1.runBadge(r_r13.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(r_r9.Status);
+    i0.ɵɵtextInterpolate(r_r13.Status);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(r_r9.SuccessCount);
+    i0.ɵɵtextInterpolate(r_r13.SuccessCount);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("/", r_r9.TotalItemCount ?? 0);
+    i0.ɵɵtextInterpolate1("/", r_r13.TotalItemCount ?? 0);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(r_r9.ProcessName || "\u2014");
+    i0.ɵɵtextInterpolate(r_r13.ProcessName || "\u2014");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(r_r9.DryRun ? 14 : -1);
+    i0.ɵɵconditional(r_r13.DryRun ? 14 : -1);
 } }
-function PSProductionComponent_Conditional_2_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+function PSProductionComponent_Conditional_2_Conditional_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "table", 30)(1, "thead")(2, "tr")(3, "th");
     i0.ɵɵtext(4, "When");
     i0.ɵɵelementEnd();
@@ -297,124 +428,98 @@ function PSProductionComponent_Conditional_2_Conditional_67_Template(rf, ctx) {
     i0.ɵɵelement(11, "th");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(12, "tbody");
-    i0.ɵɵrepeaterCreate(13, PSProductionComponent_Conditional_2_Conditional_67_For_14_Template, 16, 11, "tr", 53, _forTrack3);
+    i0.ɵɵrepeaterCreate(13, PSProductionComponent_Conditional_2_Conditional_36_For_14_Template, 16, 11, "tr", 82, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(13);
-    i0.ɵɵrepeater(ctx_r3.runs);
+    i0.ɵɵrepeater(ctx_r1.runs);
 } }
 function PSProductionComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "div", 6);
-    i0.ɵɵtext(3, "Published");
+    i0.ɵɵconditionalCreate(0, PSProductionComponent_Conditional_2_Conditional_0_Template, 21, 4, "div", 4);
+    i0.ɵɵelementStart(1, "div", 5);
+    i0.ɵɵconditionalCreate(2, PSProductionComponent_Conditional_2_Conditional_2_Template, 5, 0, "div", 6);
+    i0.ɵɵelementStart(3, "as-split", 7);
+    i0.ɵɵlistener("dragEnd", function PSProductionComponent_Conditional_2_Template_as_split_dragEnd_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSplitDragEnd($event.sizes)); });
+    i0.ɵɵconditionalCreate(4, PSProductionComponent_Conditional_2_Conditional_4_Template, 13, 4, "as-split-area", 8);
+    i0.ɵɵelementStart(5, "as-split-area", 9)(6, "div", 10)(7, "div", 11);
+    i0.ɵɵconditionalCreate(8, PSProductionComponent_Conditional_2_Conditional_8_Template, 17, 12, "div", 12)(9, PSProductionComponent_Conditional_2_Conditional_9_Template, 17, 10, "div", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 7);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 5)(7, "div", 6);
-    i0.ɵɵtext(8, "Scheduled");
+    i0.ɵɵelementStart(10, "div", 14)(11, "div", 15);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleDeploymentCollapse()); });
+    i0.ɵɵelementStart(12, "div", 16);
+    i0.ɵɵelement(13, "i", 17);
+    i0.ɵɵelementStart(14, "h3");
+    i0.ɵɵtext(15, "Deployment");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 7);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 5)(12, "div", 6);
-    i0.ɵɵtext(13, "Bound (write-back)");
+    i0.ɵɵelementStart(16, "span", 18);
+    i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 7);
-    i0.ɵɵtext(15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 5)(17, "div", 6);
-    i0.ɵɵtext(18, "Idle");
+    i0.ɵɵconditionalCreate(18, PSProductionComponent_Conditional_2_Conditional_18_Template, 2, 2, "span", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 7);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(19, "div", 20)(20, "button", 21);
+    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Template_button_click_20_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleDeploymentCollapse()); });
+    i0.ɵɵelement(21, "i", 22);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 8)(22, "div", 9)(23, "div", 10)(24, "h3");
-    i0.ɵɵtext(25, "Published models");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "span", 11);
-    i0.ɵɵtext(27);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 12);
-    i0.ɵɵrepeaterCreate(29, PSProductionComponent_Conditional_2_For_30_Template, 13, 13, "div", 13, _forTrack0);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 14)(32, "div", 15)(33, "div", 16)(34, "div", 17);
-    i0.ɵɵelement(35, "i");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "div", 18)(37, "h2", 19);
-    i0.ɵɵtext(38);
-    i0.ɵɵelementStart(39, "span", 20);
-    i0.ɵɵtext(40);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "div", 21);
-    i0.ɵɵtext(42);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "span", 22);
-    i0.ɵɵtext(44);
+    i0.ɵɵconditionalCreate(22, PSProductionComponent_Conditional_2_Conditional_22_Template, 3, 1, "div", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "button", 23);
-    i0.ɵɵlistener("click", function PSProductionComponent_Conditional_2_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.operateOpen = true); });
-    i0.ɵɵelement(46, "i", 24);
-    i0.ɵɵtext(47, " Operate ");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(48, "div", 15)(49, "div", 10)(50, "h3");
-    i0.ɵɵtext(51, "Deployment");
+    i0.ɵɵelementStart(23, "div", 24)(24, "div", 25)(25, "div", 16);
+    i0.ɵɵelement(26, "i", 26);
+    i0.ɵɵelementStart(27, "h3");
+    i0.ɵɵtext(28, "Run history");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "span", 25);
-    i0.ɵɵtext(53);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(54, "div", 26);
-    i0.ɵɵconditionalCreate(55, PSProductionComponent_Conditional_2_Conditional_55_Template, 10, 0, "div", 27)(56, PSProductionComponent_Conditional_2_Conditional_56_Template, 3, 2);
+    i0.ɵɵelementStart(29, "span", 18);
+    i0.ɵɵtext(30, "last 90 days \u00B7 newest first");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(57, "div", 15)(58, "div", 10)(59, "h3");
-    i0.ɵɵtext(60, "Run history");
+    i0.ɵɵconditionalCreate(31, PSProductionComponent_Conditional_2_Conditional_31_Template, 5, 8, "div", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "span", 25);
-    i0.ɵɵtext(62, "last 90 days \u00B7 newest first");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(63, "div", 26);
-    i0.ɵɵconditionalCreate(64, PSProductionComponent_Conditional_2_Conditional_64_Template, 6, 1)(65, PSProductionComponent_Conditional_2_Conditional_65_Template, 1, 0, "mj-loading", 28)(66, PSProductionComponent_Conditional_2_Conditional_66_Template, 2, 0, "div", 29)(67, PSProductionComponent_Conditional_2_Conditional_67_Template, 15, 0, "table", 30);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(68, "ps-operate-dialog", 31);
-    i0.ɵɵlistener("Close", function PSProductionComponent_Conditional_2_Template_ps_operate_dialog_Close_68_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onOperateClose($event)); });
+    i0.ɵɵelementStart(32, "div", 27);
+    i0.ɵɵconditionalCreate(33, PSProductionComponent_Conditional_2_Conditional_33_Template, 7, 7)(34, PSProductionComponent_Conditional_2_Conditional_34_Template, 1, 0, "mj-loading", 28)(35, PSProductionComponent_Conditional_2_Conditional_35_Template, 2, 0, "div", 29)(36, PSProductionComponent_Conditional_2_Conditional_36_Template, 15, 0, "table", 30);
+    i0.ɵɵelementEnd()()()()()();
+    i0.ɵɵelementStart(37, "ps-operate-dialog", 31);
+    i0.ɵɵlistener("Close", function PSProductionComponent_Conditional_2_Template_ps_operate_dialog_Close_37_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOperateClose($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.models.length);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.scheduledModelCount);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.boundModelCount);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r3.idleModelCount);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r3.models.length);
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r3.models);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassMap("st-" + ctx_r3.selected.deployState);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(!ctx_r1.isRunFocused ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r3.deployIcon(ctx_r3.selected.deployState));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r3.selected.label, " ");
+    i0.ɵɵclassProp("list-collapsed", ctx_r1.isListCollapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isListCollapsed ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("gutterSize", 6);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isListCollapsed ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r1.isListCollapsed ? 100 : ctx_r1.detailSizePct)("minSize", 50);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("focused-run", ctx_r1.selectedRunId && ctx_r1.isRunFocused);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", ctx_r1.isHeaderCollapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isHeaderCollapsed ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", ctx_r3.selected.version);
+    i0.ɵɵclassProp("collapsed", ctx_r1.isDeploymentCollapsed);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate4("", ctx_r1.selected.processCount, " process", ctx_r1.selected.processCount === 1 ? "" : "es", " \u00B7 ", ctx_r1.selected.bindingCount, " binding", ctx_r1.selected.bindingCount === 1 ? "" : "s");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isDeploymentCollapsed && ctx_r1.selectedBindings.length > 0 ? 18 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3("", ctx_r3.selected.algorithm, " \u00B7 ", ctx_r3.selected.problemType, " \u00B7 holdout ", ctx_r3.selected.holdoutMetric);
+    i0.ɵɵproperty("title", ctx_r1.isDeploymentCollapsed ? "Expand deployment" : "Collapse deployment");
+    i0.ɵɵattribute("aria-label", ctx_r1.isDeploymentCollapsed ? "Expand deployment" : "Collapse deployment");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-up", !ctx_r1.isDeploymentCollapsed)("fa-chevron-down", ctx_r1.isDeploymentCollapsed);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r3.deployBadge(ctx_r3.selected.deployState));
+    i0.ɵɵconditional(!ctx_r1.isDeploymentCollapsed ? 22 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r3.deployLabel(ctx_r3.selected.deployState));
-    i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate4("", ctx_r3.selected.processCount, " process", ctx_r3.selected.processCount === 1 ? "" : "es", " \u00B7 ", ctx_r3.selected.bindingCount, " binding", ctx_r3.selected.bindingCount === 1 ? "" : "s");
+    i0.ɵɵclassProp("drilldown-active", ctx_r1.selectedRunId)("focus-fill", ctx_r1.selectedRunId && ctx_r1.isRunFocused);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(ctx_r1.selectedRunId ? 31 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r3.selected.deployState === "idle" ? 55 : 56);
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r3.selectedRunId ? 64 : ctx_r3.loadingRuns ? 65 : ctx_r3.runs.length === 0 ? 66 : 67);
+    i0.ɵɵconditional(ctx_r1.selectedRunId ? 33 : ctx_r1.loadingRuns ? 34 : ctx_r1.runs.length === 0 ? 35 : 36);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("Visible", ctx_r3.operateOpen)("modelId", ctx_r3.selected.modelId)("modelLabel", ctx_r3.selected.label)("engine", ctx_r3.engine)("provider", ctx_r3.ProviderToUse)("currentUser", ctx_r3.ProviderToUse.CurrentUser);
+    i0.ɵɵproperty("Visible", ctx_r1.operateOpen)("modelId", ctx_r1.selected.modelId)("modelLabel", ctx_r1.selected.label)("engine", ctx_r1.engine)("provider", ctx_r1.ProviderToUse)("currentUser", ctx_r1.ProviderToUse.CurrentUser);
 } }
 /**
  * Models in Production — the **model-centric** control tower. Every approved (Published) model appears
@@ -437,13 +542,26 @@ export class PSProductionComponent extends BaseAngularComponent {
     selectedBindings = [];
     runs = [];
     loadingRuns = false;
+    loadingDetails = false;
     /** Whether the "Operate this model" dialog is open for the selected model. */
     operateOpen = false;
     /** The run whose per-record predictions are drilled into (null = the run list). */
     selectedRunId = null;
     runDetails = [];
-    loadingDetails = false;
+    listSizePct = 30;
+    detailSizePct = 70;
+    isListCollapsed = false;
+    isHeaderCollapsed = false;
+    isDeploymentCollapsed = false;
+    isRunFocused = false;
+    get runGridHeight() {
+        if (this.isRunFocused || (this.isHeaderCollapsed && this.isDeploymentCollapsed)) {
+            return '740px';
+        }
+        return '520px';
+    }
     ngOnInit() {
+        this.loadLayoutPrefs();
         // Reactive: rebuild the published-model list on any MJ: ML Models change (save/delete/remote-invalidate).
         this.modelsSub = this.engine
             .ObserveProperty('_Models')
@@ -455,6 +573,83 @@ export class PSProductionComponent extends BaseAngularComponent {
     ngOnDestroy() {
         this.modelsSub?.unsubscribe();
     }
+    // ---- layout splitter resizing & persistence ----
+    toggleHeaderCollapse() {
+        this.isHeaderCollapsed = !this.isHeaderCollapsed;
+        this.updateFocusState();
+        this.saveLayoutPrefs();
+        this.cdr.detectChanges();
+    }
+    toggleDeploymentCollapse() {
+        this.isDeploymentCollapsed = !this.isDeploymentCollapsed;
+        this.updateFocusState();
+        this.saveLayoutPrefs();
+        this.cdr.detectChanges();
+    }
+    toggleRunFocus() {
+        this.isRunFocused = !this.isRunFocused;
+        if (this.isRunFocused) {
+            this.isHeaderCollapsed = true;
+            this.isDeploymentCollapsed = true;
+        }
+        else {
+            this.isHeaderCollapsed = false;
+            this.isDeploymentCollapsed = false;
+        }
+        this.saveLayoutPrefs();
+        this.cdr.detectChanges();
+    }
+    updateFocusState() {
+        this.isRunFocused = this.isHeaderCollapsed && this.isDeploymentCollapsed;
+    }
+    loadLayoutPrefs() {
+        const raw = UserInfoEngine.Instance.GetSetting('mj.predictiveStudio.production.layout');
+        if (raw) {
+            try {
+                const parsed = JSON.parse(raw);
+                if (typeof parsed.listSizePct === 'number' && parsed.listSizePct >= 15 && parsed.listSizePct <= 60) {
+                    this.listSizePct = parsed.listSizePct;
+                    this.detailSizePct = 100 - parsed.listSizePct;
+                }
+                if (typeof parsed.isListCollapsed === 'boolean') {
+                    this.isListCollapsed = parsed.isListCollapsed;
+                }
+                if (typeof parsed.isHeaderCollapsed === 'boolean') {
+                    this.isHeaderCollapsed = parsed.isHeaderCollapsed;
+                }
+                if (typeof parsed.isDeploymentCollapsed === 'boolean') {
+                    this.isDeploymentCollapsed = parsed.isDeploymentCollapsed;
+                }
+                if (typeof parsed.isRunFocused === 'boolean') {
+                    this.isRunFocused = parsed.isRunFocused;
+                }
+            }
+            catch { }
+        }
+    }
+    onSplitDragEnd(sizes) {
+        if (Array.isArray(sizes) && sizes.length === 2 && typeof sizes[0] === 'number' && typeof sizes[1] === 'number') {
+            this.listSizePct = Math.round(sizes[0]);
+            this.detailSizePct = Math.round(sizes[1]);
+            this.saveLayoutPrefs();
+        }
+    }
+    toggleList() {
+        this.isListCollapsed = !this.isListCollapsed;
+        this.saveLayoutPrefs();
+        this.cdr.detectChanges();
+    }
+    saveLayoutPrefs() {
+        const prefs = {
+            listSizePct: this.listSizePct,
+            detailSizePct: this.detailSizePct,
+            isListCollapsed: this.isListCollapsed,
+            isHeaderCollapsed: this.isHeaderCollapsed,
+            isDeploymentCollapsed: this.isDeploymentCollapsed,
+            isRunFocused: this.isRunFocused,
+        };
+        UserInfoEngine.Instance.SetSettingDebounced('mj.predictiveStudio.production.layout', JSON.stringify(prefs));
+    }
     // ---- KPIs ----
     get scheduledModelCount() {
         return this.models.filter((m) => m.deployState === 'scheduled' || m.scheduledCount > 0).length;
@@ -490,14 +685,15 @@ export class PSProductionComponent extends BaseAngularComponent {
             + bindings.filter((b) => b.Mode === 'Scheduled').length;
         const lastScoredAt = bindings.reduce((acc, b) => (b.LastScoredAt && (!acc || b.LastScoredAt.getTime() > acc.getTime()) ? b.LastScoredAt : acc), null);
         const lastRowCount = bindings.find((b) => b.LastRowCount != null)?.LastRowCount ?? null;
-        const auc = primaryAuc(m);
+        const score = primaryModelScore(m);
+        const holdoutMetric = score != null ? formatMetricValue(score.key, score.value) : '—';
         return {
             modelId: m.ID,
             label: this.engine.ModelDisplayName(m),
             algorithm: this.engine.AlgorithmName(m.AlgorithmID),
             problemType: m.ProblemType ?? '—',
             version: m.Version,
-            holdoutMetric: auc != null ? auc.toFixed(3) : '—',
+            holdoutMetric,
             deployState: bindings.length > 0 ? 'bound' : scheduledCount > 0 ? 'scheduled' : 'idle',
             bindingCount: bindings.length,
             processCount: processes.length,
@@ -531,6 +727,21 @@ export class PSProductionComponent extends BaseAngularComponent {
         }
         return '—';
     }
+    get selectedTargetEntityName() {
+        if (this.selectedBindings.length > 0 && this.selectedBindings[0].targetEntity !== '—') {
+            return this.selectedBindings[0].targetEntity;
+        }
+        const model = this.engine?.PublishedModels?.find((m) => UUIDsEqual(m.ID, this.selected.modelId));
+        if (model?.PipelineID) {
+            const pipeline = this.engine?.Pipelines?.find((p) => UUIDsEqual(p.ID, model.PipelineID));
+            if (pipeline?.TargetEntityID) {
+                const ent = this.ProviderToUse.Entities.find((e) => UUIDsEqual(e.ID, pipeline.TargetEntityID));
+                if (ent)
+                    return ent.Name;
+            }
+        }
+        return null;
+    }
     // ---- selection + on-demand run history ----
     get selected() {
         return (this.models.find((m) => UUIDsEqual(m.modelId, this.selectedModelId)) ??
@@ -657,18 +868,18 @@ export class PSProductionComponent extends BaseAngularComponent {
         return 'gray';
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵPSProductionComponent_BaseFactory; return function PSProductionComponent_Factory(__ngFactoryType__) { return (ɵPSProductionComponent_BaseFactory || (ɵPSProductionComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PSProductionComponent)))(__ngFactoryType__ || PSProductionComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSProductionComponent, selectors: [["ps-production"]], inputs: { engine: "engine" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["data-testid", "ps-production-panel", 1, "ps-panel", "ps-production"], ["data-testid", "ps-production-empty", 1, "ps-empty"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-satellite-dish"], ["data-testid", "ps-production-kpis", 1, "prod-kpis"], [1, "ps-kpi"], [1, "label"], [1, "val"], [1, "prod-layout"], ["data-testid", "ps-production-list", 1, "ps-card", "mlist"], [1, "ps-card-head"], [1, "ps-badge", "gray"], [1, "ps-card-body", 2, "padding", "8px"], ["data-testid", "ps-production-row", 1, "mrow", 3, "sel"], ["data-testid", "ps-production-detail", 1, "ps-col", "detail"], [1, "ps-card"], [1, "ps-card-body", "dh"], [1, "big-ico"], [2, "flex", "1"], ["data-testid", "ps-production-detail-name"], [1, "ps-tag", "ps-mono"], [1, "ps-muted", "ps-small", "sub"], [1, "ps-badge"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-production-operate", 3, "click"], [1, "fa-solid", "fa-rocket"], [1, "ps-muted", "ps-small"], [1, "ps-card-body"], [1, "ps-callout", "info"], ["text", "Loading runs...", "size", "small"], [1, "ps-small", "ps-muted"], [1, "runs-table"], [3, "Close", "Visible", "modelId", "modelLabel", "engine", "provider", "currentUser"], ["data-testid", "ps-production-row", 1, "mrow", 3, "click"], [1, "ico"], [2, "flex", "1", "min-width", "0"], [1, "nm"], [1, "ln2", "ps-muted", "ps-small"], [1, "meta"], [1, "ps-mono", "ps-small", "ps-muted"], [1, "fa-solid", "fa-circle-info"], [1, "ps-small"], [1, "ps-section-title"], [1, "bind-row"], [1, "fa-solid", "fa-arrow-right-to-bracket", "ps-muted"], [1, "ps-divider"], [1, "ps-row", 2, "justify-content", "space-between"], ["data-testid", "ps-production-run-back", 1, "run-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], ["text", "Loading predictions...", "size", "small"], ["data-testid", "ps-production-run-detail", 1, "runs-table"], [1, "ps-mono", "ps-small"], [1, "ps-mono"], [1, "ps-muted"], ["data-testid", "ps-production-run", 1, "run-row"], ["data-testid", "ps-production-run", 1, "run-row", 3, "click"], [1, "run-right"], [1, "ps-tag", "amber"], [1, "fa-solid", "fa-chevron-right", "ps-muted"]], template: function PSProductionComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PSProductionComponent, selectors: [["ps-production"]], inputs: { engine: "engine" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["data-testid", "ps-production-panel", 1, "ps-panel", "ps-production"], ["data-testid", "ps-production-empty", 1, "ps-empty"], [1, "ps-empty-ico"], [1, "fa-solid", "fa-satellite-dish"], ["data-testid", "ps-production-kpis", 1, "prod-kpis"], [1, "prod-layout"], ["data-testid", "ps-production-collapsed-rail", 1, "prod-collapsed-strip"], ["direction", "horizontal", "unit", "percent", 1, "prod-splitter", 3, "dragEnd", "gutterSize"], [3, "size", "minSize", "maxSize"], [3, "size", "minSize"], ["data-testid", "ps-production-detail", 1, "ps-col", "detail"], [1, "ps-card", "prod-header-card"], [1, "ps-card-body", "dh"], [1, "ps-card-body", "dh-compact"], [1, "ps-card", "prod-deployment-card"], [1, "ps-card-head", "clickable", 3, "click"], [2, "display", "flex", "align-items", "center", "gap", "8px"], [1, "fa-solid", "fa-network-wired", 2, "color", "var(--mj-brand-primary)"], [1, "ps-muted", "ps-small"], [1, "ps-badge", "gray", "ps-small"], [2, "display", "flex", "align-items", "center", "gap", "6px"], ["type", "button", 1, "ps-card-collapse-btn", 3, "click", "title"], [1, "fa-solid"], [1, "ps-card-body"], [1, "ps-card", "run-card"], [1, "ps-card-head"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "var(--mj-status-info)"], [1, "ps-card-body", "run-card-body"], ["text", "Loading runs...", "size", "small"], [1, "ps-small", "ps-muted"], [1, "runs-table"], [3, "Close", "Visible", "modelId", "modelLabel", "engine", "provider", "currentUser"], [1, "ps-kpi"], [1, "label"], [1, "val"], ["type", "button", "aria-label", "Expand models list", "title", "Expand list", 1, "prod-rail-collapse", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "prod-collapsed-strip-label"], ["data-testid", "ps-production-list", 1, "ps-card", "mlist"], [2, "display", "flex", "gap", "6px", "align-items", "center"], [1, "ps-badge", "gray"], ["type", "button", "title", "Collapse list", "aria-label", "Collapse list", 1, "prod-collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-left"], [1, "ps-card-body", 2, "padding", "8px"], ["data-testid", "ps-production-row", 1, "mrow", 3, "sel"], ["data-testid", "ps-production-row", 1, "mrow", 3, "click"], [1, "ico"], [2, "flex", "1", "min-width", "0"], [1, "nm"], [1, "ln2", "ps-muted", "ps-small"], [1, "meta"], [1, "ps-badge"], [1, "ps-mono", "ps-small", "ps-muted"], [1, "big-ico"], ["data-testid", "ps-production-detail-name"], [1, "ps-tag", "ps-mono"], [1, "ps-muted", "ps-small", "sub"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-production-operate", 3, "click"], [1, "fa-solid", "fa-rocket"], ["type", "button", "title", "Collapse model header", "aria-label", "Collapse model header", 1, "ps-card-collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "ps-card-body", "dh-compact", 3, "click"], [1, "mini-ico"], [1, "compact-info"], [1, "ps-tag", "ps-mono", "ps-small"], ["mjButton", "", "variant", "primary", "size", "sm", "data-testid", "ps-production-operate-compact", 3, "click"], ["type", "button", "title", "Expand model header", "aria-label", "Expand model header", 1, "ps-card-collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-down"], [1, "ps-callout", "info"], [1, "fa-solid", "fa-circle-info"], [1, "ps-small"], [1, "ps-section-title"], [1, "bind-row"], [1, "fa-solid", "fa-arrow-right-to-bracket", "ps-muted"], [2, "flex", "1"], [1, "ps-divider"], [1, "ps-row", 2, "justify-content", "space-between"], ["type", "button", 1, "ps-focus-toggle-btn", 3, "click", "title"], [1, "run-drill-nav"], ["data-testid", "ps-production-run-back", 1, "run-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], ["data-testid", "ps-production-run-grid", 3, "modelId", "runId", "entityName", "problemType", "title", "height"], ["data-testid", "ps-production-run", 1, "run-row"], ["data-testid", "ps-production-run", 1, "run-row", 3, "click"], [1, "ps-mono"], [1, "ps-muted"], [1, "run-right"], [1, "ps-tag", "amber"], [1, "fa-solid", "fa-chevron-right", "ps-muted"]], template: function PSProductionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, PSProductionComponent_Conditional_1_Template, 7, 0, "div", 1)(2, PSProductionComponent_Conditional_2_Template, 69, 29);
+            i0.ɵɵconditionalCreate(1, PSProductionComponent_Conditional_1_Template, 7, 0, "div", 1)(2, PSProductionComponent_Conditional_2_Template, 38, 39);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.models.length === 0 ? 1 : 2);
-        } }, dependencies: [CommonModule, SharedGenericModule, i1.LoadingComponent, MJButtonDirective, PSOperateDialogComponent, i2.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", "/* Models in Production \u2014 model-centric control tower (master/detail). All colors via --mj-* tokens. */\n\n.ps-production {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px;\n}\n\n.prod-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 14px;\n}\n\n.prod-layout {\n  display: grid;\n  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);\n  gap: 16px;\n  align-items: start;\n}\n@media (max-width: 900px) {\n  .prod-layout { grid-template-columns: 1fr; }\n}\n\n/* master list */\n.prod-layout .mlist .mrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  padding: 10px 10px;\n  border-radius: 9px;\n  cursor: pointer;\n}\n.prod-layout .mlist .mrow:hover { background: var(--mj-bg-surface-hover); }\n.prod-layout .mlist .mrow.sel { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.prod-layout .mlist .mrow .ico {\n  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto;\n}\n.prod-layout .mlist .mrow .nm { font-weight: 640; font-size: 14px; color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.prod-layout .mlist .mrow .ln2 { margin-top: 2px; }\n.prod-layout .mlist .mrow .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }\n\n/* deploy-state icon colors (master + detail) */\n.st-bound { background: var(--mj-status-success); }\n.st-scheduled { background: var(--mj-status-info); }\n.st-idle { background: var(--mj-text-disabled); }\n\n/* detail */\n.prod-layout .detail { display: flex; flex-direction: column; gap: 14px; }\n.prod-layout .detail .dh { display: flex; align-items: center; gap: 13px; }\n.prod-layout .detail .dh h2 { margin: 0; font-size: 17px; font-weight: 680; color: var(--mj-text-primary); }\n.prod-layout .detail .dh .sub { margin-top: 3px; }\n.prod-layout .detail .big-ico {\n  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 16px; flex: 0 0 auto;\n}\n\n/* binding rows */\n.bind-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mj-border-subtle); }\n.bind-row:last-child { border-bottom: none; }\n\n/* run history table */\n.runs-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.runs-table th {\n  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default);\n}\n.runs-table td { padding: 7px 8px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-secondary); }\n.runs-table tr:last-child td { border-bottom: none; }\n.runs-table tr.run-row { cursor: pointer; }\n.runs-table tr.run-row:hover td { background: var(--mj-bg-surface-hover); }\n.runs-table .run-right { text-align: right; white-space: nowrap; }\n.runs-table .run-right i { margin-left: 8px; opacity: .5; }\n\n.run-back {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  background: none; border: none; color: var(--mj-text-link); font-size: 13px; padding: 0 0 10px;\n}\n\n/* empty state CTA spacing (shared .ps-empty) */\n.ps-production .ps-empty p { max-width: 520px; }\n"], encapsulation: 2 });
+        } }, dependencies: [CommonModule, AngularSplitModule, i1.SplitComponent, i1.SplitAreaComponent, SharedGenericModule, i2.LoadingComponent, MJButtonDirective, PSOperateDialogComponent, PSPredictionsGridComponent, i3.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", "/* Models in Production \u2014 model-centric control tower (master/detail). All colors via --mj-* tokens. */\n\n.ps-production {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  overflow: hidden;\n  gap: 16px;\n  padding: 4px;\n}\n\n.prod-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 14px;\n  flex: 0 0 auto;\n}\n\n.prod-layout {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n.prod-splitter {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-page);\n}\n\n.prod-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.prod-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.prod-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.prod-collapsed-strip-label {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  margin-top: 8px;\n}\n\n.prod-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.prod-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/* master list \u2014 own scroll column */\n.prod-layout .mlist {\n  min-height: 0;\n  overflow-y: auto;\n  align-self: stretch;\n  height: 100%;\n  border-radius: 0;\n  border: none;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.prod-layout .mlist .mrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  padding: 10px 10px;\n  border-radius: 9px;\n  cursor: pointer;\n}\n.prod-layout .mlist .mrow:hover { background: var(--mj-bg-surface-hover); }\n.prod-layout .mlist .mrow.sel { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.prod-layout .mlist .mrow .ico {\n  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto;\n}\n.prod-layout .mlist .mrow .nm { font-weight: 640; font-size: 14px; color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.prod-layout .mlist .mrow .ln2 { margin-top: 2px; }\n.prod-layout .mlist .mrow .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }\n\n/* deploy-state icon colors (master + detail) */\n.st-bound { background: var(--mj-status-success); }\n.st-scheduled { background: var(--mj-status-info); }\n.st-idle { background: var(--mj-text-disabled); }\n\n/* detail \u2014 own scroll column */\n.prod-layout .detail {\n  min-height: 0;\n  overflow-y: auto;\n  align-self: stretch;\n  height: 100%;\n  padding: 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.prod-layout .detail .dh { display: flex; align-items: center; gap: 13px; }\n.prod-layout .detail .dh h2 { margin: 0; font-size: 17px; font-weight: 680; color: var(--mj-text-primary); }\n.prod-layout .detail .dh .sub { margin-top: 3px; }\n.prod-layout .detail .big-ico {\n  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 16px; flex: 0 0 auto;\n}\n\n/* binding rows */\n.bind-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mj-border-subtle); }\n.bind-row:last-child { border-bottom: none; }\n\n/* run history table */\n.runs-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.runs-table th {\n  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default);\n}\n.runs-table td { padding: 7px 8px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-secondary); }\n.runs-table tr:last-child td { border-bottom: none; }\n.runs-table tr.run-row { cursor: pointer; }\n.runs-table tr.run-row:hover td { background: var(--mj-bg-surface-hover); }\n.runs-table .run-right { text-align: right; white-space: nowrap; }\n.runs-table .run-right i { margin-left: 8px; opacity: .5; }\n\n.run-back {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  background: none; border: none; color: var(--mj-text-link); font-size: 13px; padding: 0 0 10px;\n}\n\n/* collapsible cards and focus mode */\n.prod-header-card.collapsed {\n  padding: 0;\n  overflow: visible;\n}\n\n.dh-compact {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 14px;\n  min-height: 40px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.dh-compact:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.dh-compact .mini-ico {\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.dh-compact .compact-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.dh-compact .compact-info strong {\n  color: var(--mj-text-primary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.prod-deployment-card.collapsed {\n  background: var(--mj-bg-surface-card);\n}\n\n.prod-deployment-card.collapsed .ps-card-head {\n  min-height: 40px;\n  padding: 6px 14px;\n  box-sizing: border-box;\n}\n\n.prod-deployment-card .ps-card-head.clickable {\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.15s ease;\n}\n\n.prod-deployment-card .ps-card-head.clickable:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.prod-layout .detail.focused-run {\n  gap: 8px;\n}\n\n.run-card.focus-fill {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.run-card.focus-fill .run-card-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.ps-card-collapse-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: var(--mj-radius-sm, 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  flex: 0 0 auto;\n}\n\n.ps-card-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-focus-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-focus-toggle-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-focus-toggle-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.run-drill-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n/* empty state CTA spacing (shared .ps-empty) */\n.ps-production .ps-empty p { max-width: 520px; }\n\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PSProductionComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'ps-production', imports: [CommonModule, SharedGenericModule, MJButtonDirective, PSOperateDialogComponent], encapsulation: ViewEncapsulation.None, template: `
+        args: [{ standalone: true, selector: 'ps-production', imports: [CommonModule, AngularSplitModule, SharedGenericModule, MJButtonDirective, PSOperateDialogComponent, PSPredictionsGridComponent], encapsulation: ViewEncapsulation.None, template: `
     <div class="ps-panel ps-production" data-testid="ps-production-panel">
       @if (models.length === 0) {
         <div class="ps-empty" data-testid="ps-production-empty">
@@ -681,137 +892,207 @@ export class PSProductionComponent extends BaseAngularComponent {
         </div>
       } @else {
         <!-- KPI strip -->
-        <div class="prod-kpis" data-testid="ps-production-kpis">
-          <div class="ps-kpi"><div class="label">Published</div><div class="val">{{ models.length }}</div></div>
-          <div class="ps-kpi"><div class="label">Scheduled</div><div class="val">{{ scheduledModelCount }}</div></div>
-          <div class="ps-kpi"><div class="label">Bound (write-back)</div><div class="val">{{ boundModelCount }}</div></div>
-          <div class="ps-kpi"><div class="label">Idle</div><div class="val">{{ idleModelCount }}</div></div>
-        </div>
-
-        <div class="prod-layout">
-          <!-- master list -->
-          <div class="ps-card mlist" data-testid="ps-production-list">
-            <div class="ps-card-head"><h3>Published models</h3><span class="ps-badge gray">{{ models.length }}</span></div>
-            <div class="ps-card-body" style="padding:8px">
-              @for (m of models; track m.modelId) {
-                <div class="mrow" data-testid="ps-production-row" [class.sel]="m.modelId === selectedModelId" (click)="select(m.modelId)">
-                  <div class="ico" [class]="'st-' + m.deployState"><i [class]="deployIcon(m.deployState)"></i></div>
-                  <div style="flex:1;min-width:0">
-                    <div class="nm">{{ m.label }}</div>
-                    <div class="ln2 ps-muted ps-small">v{{ m.version }} · {{ m.algorithm }}</div>
-                  </div>
-                  <div class="meta">
-                    <span class="ps-badge" [class]="deployBadge(m.deployState)">{{ deployLabel(m.deployState) }}</span>
-                    <div class="ps-mono ps-small ps-muted">{{ m.holdoutMetric }}</div>
-                  </div>
-                </div>
-              }
-            </div>
+        @if (!isRunFocused) {
+          <div class="prod-kpis" data-testid="ps-production-kpis">
+            <div class="ps-kpi"><div class="label">Published</div><div class="val">{{ models.length }}</div></div>
+            <div class="ps-kpi"><div class="label">Scheduled</div><div class="val">{{ scheduledModelCount }}</div></div>
+            <div class="ps-kpi"><div class="label">Bound (write-back)</div><div class="val">{{ boundModelCount }}</div></div>
+            <div class="ps-kpi"><div class="label">Idle</div><div class="val">{{ idleModelCount }}</div></div>
           </div>
+        }
 
-          <!-- detail -->
-          <div class="ps-col detail" data-testid="ps-production-detail">
-            <div class="ps-card">
-              <div class="ps-card-body dh">
-                <div class="big-ico" [class]="'st-' + selected.deployState"><i [class]="deployIcon(selected.deployState)"></i></div>
-                <div style="flex:1">
-                  <h2 data-testid="ps-production-detail-name">{{ selected.label }} <span class="ps-tag ps-mono">v{{ selected.version }}</span></h2>
-                  <div class="ps-muted ps-small sub">{{ selected.algorithm }} · {{ selected.problemType }} · holdout {{ selected.holdoutMetric }}</div>
-                </div>
-                <span class="ps-badge" [class]="deployBadge(selected.deployState)">{{ deployLabel(selected.deployState) }}</span>
-                <button mjButton variant="primary" size="sm" data-testid="ps-production-operate" (click)="operateOpen = true">
-                  <i class="fa-solid fa-rocket"></i> Operate
-                </button>
-              </div>
+        <div class="prod-layout" [class.list-collapsed]="isListCollapsed">
+          @if (isListCollapsed) {
+            <div class="prod-collapsed-strip" data-testid="ps-production-collapsed-rail">
+              <button class="prod-rail-collapse" type="button" (click)="toggleList()" aria-label="Expand models list" title="Expand list">
+                <i class="fa-solid fa-chevron-right"></i>
+              </button>
+              <div class="prod-collapsed-strip-label"><i class="fa-solid fa-satellite-dish"></i></div>
             </div>
+          }
 
-            <!-- deployment status -->
-            <div class="ps-card">
-              <div class="ps-card-head"><h3>Deployment</h3>
-                <span class="ps-muted ps-small">{{ selected.processCount }} process{{ selected.processCount === 1 ? '' : 'es' }} · {{ selected.bindingCount }} binding{{ selected.bindingCount === 1 ? '' : 's' }}</span>
-              </div>
-              <div class="ps-card-body">
-                @if (selected.deployState === 'idle') {
-                  <div class="ps-callout info">
-                    <i class="fa-solid fa-circle-info"></i>
-                    <div class="ps-small">This model is published but <strong>not operating</strong> yet — nothing scores with it. Click <strong>Operate</strong> above to run it now, schedule it to run regularly, or write predictions back to a column.</div>
+          <as-split direction="horizontal" class="prod-splitter" unit="percent" [gutterSize]="6" (dragEnd)="onSplitDragEnd($event.sizes)">
+            @if (!isListCollapsed) {
+              <as-split-area [size]="listSizePct" [minSize]="18" [maxSize]="50">
+                <!-- master list -->
+                <div class="ps-card mlist" data-testid="ps-production-list">
+                  <div class="ps-card-head">
+                    <h3>Published models</h3>
+                    <div style="display:flex;gap:6px;align-items:center">
+                      <span class="ps-badge gray">{{ models.length }}</span>
+                      <button class="prod-collapse-btn" type="button" (click)="toggleList()" title="Collapse list" aria-label="Collapse list">
+                        <i class="fa-solid fa-chevron-left"></i>
+                      </button>
+                    </div>
                   </div>
-                } @else {
-                  @if (selectedBindings.length > 0) {
-                    <div class="ps-section-title">Scoring bindings</div>
-                    @for (b of selectedBindings; track b.id) {
-                      <div class="bind-row">
-                        <i class="fa-solid fa-arrow-right-to-bracket ps-muted"></i>
-                        <div style="flex:1">
-                          <div class="ps-small"><strong>{{ b.targetEntity }}</strong>.{{ b.targetColumn }}</div>
-                          <div class="ps-muted ps-small">{{ b.mode }}{{ b.schedulePhrase ? ' · ' + b.schedulePhrase : '' }}</div>
+                  <div class="ps-card-body" style="padding:8px">
+                    @for (m of models; track m.modelId) {
+                      <div class="mrow" data-testid="ps-production-row" [class.sel]="m.modelId === selectedModelId" (click)="select(m.modelId)">
+                        <div class="ico" [class]="'st-' + m.deployState"><i [class]="deployIcon(m.deployState)"></i></div>
+                        <div style="flex:1;min-width:0">
+                          <div class="nm">{{ m.label }}</div>
+                          <div class="ln2 ps-muted ps-small">v{{ m.version }} · {{ m.algorithm }}</div>
+                        </div>
+                        <div class="meta">
+                          <span class="ps-badge" [class]="deployBadge(m.deployState)">{{ deployLabel(m.deployState) }}</span>
+                          <div class="ps-mono ps-small ps-muted">{{ m.holdoutMetric }}</div>
                         </div>
-                        <span class="ps-badge" [class]="modeBadge(b.mode)">{{ b.mode }}</span>
                       </div>
                     }
+                  </div>
+                </div>
+              </as-split-area>
+            }
+
+            <as-split-area [size]="isListCollapsed ? 100 : detailSizePct" [minSize]="50">
+              <!-- detail -->
+              <div class="ps-col detail" [class.focused-run]="selectedRunId && isRunFocused" data-testid="ps-production-detail">
+                <!-- 1. MODEL HEADER CARD -->
+                <div class="ps-card prod-header-card" [class.collapsed]="isHeaderCollapsed">
+                  @if (!isHeaderCollapsed) {
+                    <div class="ps-card-body dh">
+                      <div class="big-ico" [class]="'st-' + selected.deployState"><i [class]="deployIcon(selected.deployState)"></i></div>
+                      <div style="flex:1;min-width:0">
+                        <h2 data-testid="ps-production-detail-name">{{ selected.label }} <span class="ps-tag ps-mono">v{{ selected.version }}</span></h2>
+                        <div class="ps-muted ps-small sub">{{ selected.algorithm }} · {{ selected.problemType }} · holdout {{ selected.holdoutMetric }}</div>
+                      </div>
+                      <span class="ps-badge" [class]="deployBadge(selected.deployState)">{{ deployLabel(selected.deployState) }}</span>
+                      <button mjButton variant="primary" size="sm" data-testid="ps-production-operate" (click)="operateOpen = true">
+                        <i class="fa-solid fa-rocket"></i> Operate
+                      </button>
+                      <button class="ps-card-collapse-btn" type="button" (click)="toggleHeaderCollapse()" title="Collapse model header" aria-label="Collapse model header">
+                        <i class="fa-solid fa-chevron-up"></i>
+                      </button>
+                    </div>
                   } @else {
-                    <div class="ps-small ps-muted">Scheduled to run, writing generic output to the process run history (no write-back column).</div>
-                  }
-                  @if (selected.lastScoredAt) {
-                    <div class="ps-divider"></div>
-                    <div class="ps-row" style="justify-content:space-between"><span class="ps-muted ps-small">Last scored</span><span class="ps-small">{{ selected.lastScoredAt | date:'medium' }}{{ selected.lastRowCount != null ? ' · ' + selected.lastRowCount + ' rows' : '' }}</span></div>
+                    <div class="ps-card-body dh-compact" (click)="toggleHeaderCollapse()">
+                      <div class="mini-ico" [class]="'st-' + selected.deployState"><i [class]="deployIcon(selected.deployState)"></i></div>
+                      <div class="compact-info">
+                        <strong>{{ selected.label }}</strong>
+                        <span class="ps-tag ps-mono ps-small">v{{ selected.version }}</span>
+                        <span class="ps-muted ps-small">· {{ selected.algorithm }}</span>
+                      </div>
+                      <span class="ps-badge" [class]="deployBadge(selected.deployState)">{{ deployLabel(selected.deployState) }}</span>
+                      <button mjButton variant="primary" size="sm" data-testid="ps-production-operate-compact" (click)="$event.stopPropagation(); operateOpen = true">
+                        <i class="fa-solid fa-rocket"></i> Operate
+                      </button>
+                      <button class="ps-card-collapse-btn" type="button" (click)="$event.stopPropagation(); toggleHeaderCollapse()" title="Expand model header" aria-label="Expand model header">
+                        <i class="fa-solid fa-chevron-down"></i>
+                      </button>
+                    </div>
                   }
-                }
-              </div>
-            </div>
+                </div>
 
-            <!-- past runs (on demand) -->
-            <div class="ps-card">
-              <div class="ps-card-head"><h3>Run history</h3><span class="ps-muted ps-small">last 90 days · newest first</span></div>
-              <div class="ps-card-body">
-                @if (selectedRunId) {
-                  <!-- run drill-in: per-record predictions from Process Run Details -->
-                  <button class="run-back" data-testid="ps-production-run-back" (click)="closeRun()">
-                    <i class="fa-solid fa-arrow-left"></i> All runs
-                  </button>
-                  @if (loadingDetails) {
-                    <mj-loading text="Loading predictions..." size="small"></mj-loading>
-                  } @else if (runDetails.length === 0) {
-                    <div class="ps-small ps-muted">No per-record predictions recorded for this run.</div>
-                  } @else {
-                    <table class="runs-table" data-testid="ps-production-run-detail">
-                      <thead><tr><th>Record</th><th>Status</th><th>Prediction</th><th>Scored</th></tr></thead>
-                      <tbody>
-                        @for (d of runDetails; track d.recordId) {
-                          <tr>
-                            <td class="ps-mono ps-small">{{ d.recordId }}</td>
-                            <td><span class="ps-badge" [class]="runBadge(d.status)">{{ d.status }}</span></td>
-                            <td class="ps-mono">{{ d.score }}@if (d.class) { <span class="ps-muted"> · {{ d.class }}</span> }</td>
-                            <td class="ps-small ps-muted">{{ d.scoredAt ? (d.scoredAt | date:'short') : '—' }}</td>
-                          </tr>
+                <!-- 2. DEPLOYMENT STATUS CARD -->
+                <div class="ps-card prod-deployment-card" [class.collapsed]="isDeploymentCollapsed">
+                  <div class="ps-card-head clickable" (click)="toggleDeploymentCollapse()">
+                    <div style="display:flex;align-items:center;gap:8px">
+                      <i class="fa-solid fa-network-wired" style="color:var(--mj-brand-primary)"></i>
+                      <h3>Deployment</h3>
+                      <span class="ps-muted ps-small">{{ selected.processCount }} process{{ selected.processCount === 1 ? '' : 'es' }} · {{ selected.bindingCount }} binding{{ selected.bindingCount === 1 ? '' : 's' }}</span>
+                      @if (isDeploymentCollapsed && selectedBindings.length > 0) {
+                        <span class="ps-badge gray ps-small">{{ selectedBindings[0].targetEntity }}.{{ selectedBindings[0].targetColumn }}</span>
+                      }
+                    </div>
+                    <div style="display:flex;align-items:center;gap:6px">
+                      <button class="ps-card-collapse-btn" type="button" (click)="$event.stopPropagation(); toggleDeploymentCollapse()" [title]="isDeploymentCollapsed ? 'Expand deployment' : 'Collapse deployment'" [attr.aria-label]="isDeploymentCollapsed ? 'Expand deployment' : 'Collapse deployment'">
+                        <i class="fa-solid" [class.fa-chevron-up]="!isDeploymentCollapsed" [class.fa-chevron-down]="isDeploymentCollapsed"></i>
+                      </button>
+                    </div>
+                  </div>
+                  @if (!isDeploymentCollapsed) {
+                    <div class="ps-card-body">
+                      @if (selected.deployState === 'idle') {
+                        <div class="ps-callout info">
+                          <i class="fa-solid fa-circle-info"></i>
+                          <div class="ps-small">This model is published but <strong>not operating</strong> yet — nothing scores with it. Click <strong>Operate</strong> above to run it now, schedule it to run regularly, or write predictions back to a column.</div>
+                        </div>
+                      } @else {
+                        @if (selectedBindings.length > 0) {
+                          <div class="ps-section-title">Scoring bindings</div>
+                          @for (b of selectedBindings; track b.id) {
+                            <div class="bind-row">
+                              <i class="fa-solid fa-arrow-right-to-bracket ps-muted"></i>
+                              <div style="flex:1">
+                                <div class="ps-small"><strong>{{ b.targetEntity }}</strong>.{{ b.targetColumn }}</div>
+                                <div class="ps-muted ps-small">{{ b.mode }}{{ b.schedulePhrase ? ' · ' + b.schedulePhrase : '' }}</div>
+                              </div>
+                              <span class="ps-badge" [class]="modeBadge(b.mode)">{{ b.mode }}</span>
+                            </div>
+                          }
+                        } @else {
+                          <div class="ps-small ps-muted">Scheduled to run, writing generic output to the process run history (no write-back column).</div>
+                        }
+                        @if (selected.lastScoredAt) {
+                          <div class="ps-divider"></div>
+                          <div class="ps-row" style="justify-content:space-between"><span class="ps-muted ps-small">Last scored</span><span class="ps-small">{{ selected.lastScoredAt | date:'medium' }}{{ selected.lastRowCount != null ? ' · ' + selected.lastRowCount + ' rows' : '' }}</span></div>
                         }
-                      </tbody>
-                    </table>
-                  }
-                } @else if (loadingRuns) {
-                  <mj-loading text="Loading runs..." size="small"></mj-loading>
-                } @else if (runs.length === 0) {
-                  <div class="ps-small ps-muted">No runs recorded yet. Each time this model runs as a Record Process, its predictions are saved to the process run history — even without a scoring binding.</div>
-                } @else {
-                  <table class="runs-table">
-                    <thead><tr><th>When</th><th>Status</th><th>Scored</th><th>Process</th><th></th></tr></thead>
-                    <tbody>
-                      @for (r of runs; track r.ID) {
-                        <tr data-testid="ps-production-run" class="run-row" (click)="openRun(r.ID)">
-                          <td>{{ (r.StartTime || r.CreatedAt) | date:'short' }}</td>
-                          <td><span class="ps-badge" [class]="runBadge(r.Status)">{{ r.Status }}</span></td>
-                          <td class="ps-mono">{{ r.SuccessCount }}<span class="ps-muted">/{{ r.TotalItemCount ?? 0 }}</span></td>
-                          <td class="ps-small ps-muted">{{ r.ProcessName || '—' }}</td>
-                          <td class="run-right">@if (r.DryRun) { <span class="ps-tag amber">dry run</span> }<i class="fa-solid fa-chevron-right ps-muted"></i></td>
-                        </tr>
                       }
-                    </tbody>
-                  </table>
-                }
+                    </div>
+                  }
+                </div>
+
+                <!-- 3. RUN HISTORY CARD -->
+                <div class="ps-card run-card" [class.drilldown-active]="selectedRunId" [class.focus-fill]="selectedRunId && isRunFocused">
+                  <div class="ps-card-head">
+                    <div style="display:flex;align-items:center;gap:8px">
+                      <i class="fa-solid fa-clock-rotate-left" style="color:var(--mj-status-info)"></i>
+                      <h3>Run history</h3>
+                      <span class="ps-muted ps-small">last 90 days · newest first</span>
+                    </div>
+                    @if (selectedRunId) {
+                      <div style="display:flex;align-items:center;gap:8px">
+                        <button class="ps-focus-toggle-btn" type="button" (click)="toggleRunFocus()" [class.active]="isRunFocused" [title]="isRunFocused ? 'Exit focus (expand header & deployment)' : 'Focus mode (collapse header & deployment)'">
+                          <i class="fa-solid" [class.fa-compress]="isRunFocused" [class.fa-expand]="!isRunFocused"></i>
+                          <span>{{ isRunFocused ? 'Exit Focus' : 'Focus' }}</span>
+                        </button>
+                      </div>
+                    }
+                  </div>
+                  <div class="ps-card-body run-card-body">
+                    @if (selectedRunId) {
+                      <!-- run drill-in: unified predictions grid with virtual scrolling, name resolution, charts & history -->
+                      <div class="run-drill-nav">
+                        <button class="run-back" data-testid="ps-production-run-back" (click)="closeRun()">
+                          <i class="fa-solid fa-arrow-left"></i> All runs
+                        </button>
+                        <span class="ps-tag ps-mono ps-small">Run: {{ selectedRunId }}</span>
+                      </div>
+                      <ps-predictions-grid
+                        data-testid="ps-production-run-grid"
+                        [modelId]="selected.modelId"
+                        [runId]="selectedRunId"
+                        [entityName]="selectedTargetEntityName"
+                        [problemType]="selected.problemType"
+                        [title]="selected.label + ' — Run Predictions'"
+                        [height]="runGridHeight">
+                      </ps-predictions-grid>
+                    } @else if (loadingRuns) {
+                      <mj-loading text="Loading runs..." size="small"></mj-loading>
+                    } @else if (runs.length === 0) {
+                      <div class="ps-small ps-muted">No runs recorded yet. Each time this model runs as a Record Process, its predictions are saved to the process run history — even without a scoring binding.</div>
+                    } @else {
+                      <table class="runs-table">
+                        <thead><tr><th>When</th><th>Status</th><th>Scored</th><th>Process</th><th></th></tr></thead>
+                        <tbody>
+                          @for (r of runs; track r.ID) {
+                            <tr data-testid="ps-production-run" class="run-row" (click)="openRun(r.ID)">
+                              <td>{{ (r.StartTime || r.CreatedAt) | date:'short' }}</td>
+                              <td><span class="ps-badge" [class]="runBadge(r.Status)">{{ r.Status }}</span></td>
+                              <td class="ps-mono">{{ r.SuccessCount }}<span class="ps-muted">/{{ r.TotalItemCount ?? 0 }}</span></td>
+                              <td class="ps-small ps-muted">{{ r.ProcessName || '—' }}</td>
+                              <td class="run-right">@if (r.DryRun) { <span class="ps-tag amber">dry run</span> }<i class="fa-solid fa-chevron-right ps-muted"></i></td>
+                            </tr>
+                          }
+                        </tbody>
+                      </table>
+                    }
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
+            </as-split-area>
+          </as-split>
+    </div>
 
         <ps-operate-dialog
           [Visible]="operateOpen"
@@ -824,9 +1105,9 @@ export class PSProductionComponent extends BaseAngularComponent {
         </ps-operate-dialog>
       }
     </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", "/* Models in Production \u2014 model-centric control tower (master/detail). All colors via --mj-* tokens. */\n\n.ps-production {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 4px;\n}\n\n.prod-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 14px;\n}\n\n.prod-layout {\n  display: grid;\n  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);\n  gap: 16px;\n  align-items: start;\n}\n@media (max-width: 900px) {\n  .prod-layout { grid-template-columns: 1fr; }\n}\n\n/* master list */\n.prod-layout .mlist .mrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  padding: 10px 10px;\n  border-radius: 9px;\n  cursor: pointer;\n}\n.prod-layout .mlist .mrow:hover { background: var(--mj-bg-surface-hover); }\n.prod-layout .mlist .mrow.sel { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.prod-layout .mlist .mrow .ico {\n  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto;\n}\n.prod-layout .mlist .mrow .nm { font-weight: 640; font-size: 14px; color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.prod-layout .mlist .mrow .ln2 { margin-top: 2px; }\n.prod-layout .mlist .mrow .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }\n\n/* deploy-state icon colors (master + detail) */\n.st-bound { background: var(--mj-status-success); }\n.st-scheduled { background: var(--mj-status-info); }\n.st-idle { background: var(--mj-text-disabled); }\n\n/* detail */\n.prod-layout .detail { display: flex; flex-direction: column; gap: 14px; }\n.prod-layout .detail .dh { display: flex; align-items: center; gap: 13px; }\n.prod-layout .detail .dh h2 { margin: 0; font-size: 17px; font-weight: 680; color: var(--mj-text-primary); }\n.prod-layout .detail .dh .sub { margin-top: 3px; }\n.prod-layout .detail .big-ico {\n  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 16px; flex: 0 0 auto;\n}\n\n/* binding rows */\n.bind-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mj-border-subtle); }\n.bind-row:last-child { border-bottom: none; }\n\n/* run history table */\n.runs-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.runs-table th {\n  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default);\n}\n.runs-table td { padding: 7px 8px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-secondary); }\n.runs-table tr:last-child td { border-bottom: none; }\n.runs-table tr.run-row { cursor: pointer; }\n.runs-table tr.run-row:hover td { background: var(--mj-bg-surface-hover); }\n.runs-table .run-right { text-align: right; white-space: nowrap; }\n.runs-table .run-right i { margin-left: 8px; opacity: .5; }\n\n.run-back {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  background: none; border: none; color: var(--mj-text-link); font-size: 13px; padding: 0 0 10px;\n}\n\n/* empty state CTA spacing (shared .ps-empty) */\n.ps-production .ps-empty p { max-width: 520px; }\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", "/* Models in Production \u2014 model-centric control tower (master/detail). All colors via --mj-* tokens. */\n\n.ps-production {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  width: 100%;\n  overflow: hidden;\n  gap: 16px;\n  padding: 4px;\n}\n\n.prod-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 14px;\n  flex: 0 0 auto;\n}\n\n.prod-layout {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-lg);\n  border: 1px solid var(--mj-border-default);\n}\n\n.prod-splitter {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-page);\n}\n\n.prod-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.prod-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.prod-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.prod-collapsed-strip-label {\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  margin-top: 8px;\n}\n\n.prod-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.prod-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/* master list \u2014 own scroll column */\n.prod-layout .mlist {\n  min-height: 0;\n  overflow-y: auto;\n  align-self: stretch;\n  height: 100%;\n  border-radius: 0;\n  border: none;\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.prod-layout .mlist .mrow {\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  padding: 10px 10px;\n  border-radius: 9px;\n  cursor: pointer;\n}\n.prod-layout .mlist .mrow:hover { background: var(--mj-bg-surface-hover); }\n.prod-layout .mlist .mrow.sel { background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.prod-layout .mlist .mrow .ico {\n  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 13px; flex: 0 0 auto;\n}\n.prod-layout .mlist .mrow .nm { font-weight: 640; font-size: 14px; color: var(--mj-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.prod-layout .mlist .mrow .ln2 { margin-top: 2px; }\n.prod-layout .mlist .mrow .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }\n\n/* deploy-state icon colors (master + detail) */\n.st-bound { background: var(--mj-status-success); }\n.st-scheduled { background: var(--mj-status-info); }\n.st-idle { background: var(--mj-text-disabled); }\n\n/* detail \u2014 own scroll column */\n.prod-layout .detail {\n  min-height: 0;\n  overflow-y: auto;\n  align-self: stretch;\n  height: 100%;\n  padding: 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.prod-layout .detail .dh { display: flex; align-items: center; gap: 13px; }\n.prod-layout .detail .dh h2 { margin: 0; font-size: 17px; font-weight: 680; color: var(--mj-text-primary); }\n.prod-layout .detail .dh .sub { margin-top: 3px; }\n.prod-layout .detail .big-ico {\n  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;\n  color: var(--mj-text-inverse); font-size: 16px; flex: 0 0 auto;\n}\n\n/* binding rows */\n.bind-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mj-border-subtle); }\n.bind-row:last-child { border-bottom: none; }\n\n/* run history table */\n.runs-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.runs-table th {\n  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;\n  color: var(--mj-text-muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--mj-border-default);\n}\n.runs-table td { padding: 7px 8px; border-bottom: 1px solid var(--mj-border-subtle); color: var(--mj-text-secondary); }\n.runs-table tr:last-child td { border-bottom: none; }\n.runs-table tr.run-row { cursor: pointer; }\n.runs-table tr.run-row:hover td { background: var(--mj-bg-surface-hover); }\n.runs-table .run-right { text-align: right; white-space: nowrap; }\n.runs-table .run-right i { margin-left: 8px; opacity: .5; }\n\n.run-back {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  background: none; border: none; color: var(--mj-text-link); font-size: 13px; padding: 0 0 10px;\n}\n\n/* collapsible cards and focus mode */\n.prod-header-card.collapsed {\n  padding: 0;\n  overflow: visible;\n}\n\n.dh-compact {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 14px;\n  min-height: 40px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.dh-compact:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.dh-compact .mini-ico {\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.dh-compact .compact-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  line-height: 1.4;\n}\n\n.dh-compact .compact-info strong {\n  color: var(--mj-text-primary);\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.prod-deployment-card.collapsed {\n  background: var(--mj-bg-surface-card);\n}\n\n.prod-deployment-card.collapsed .ps-card-head {\n  min-height: 40px;\n  padding: 6px 14px;\n  box-sizing: border-box;\n}\n\n.prod-deployment-card .ps-card-head.clickable {\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.15s ease;\n}\n\n.prod-deployment-card .ps-card-head.clickable:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.prod-layout .detail.focused-run {\n  gap: 8px;\n}\n\n.run-card.focus-fill {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.run-card.focus-fill .run-card-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.ps-card-collapse-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border-radius: var(--mj-radius-sm, 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  flex: 0 0 auto;\n}\n\n.ps-card-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-focus-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.ps-focus-toggle-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-focus-toggle-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.run-drill-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n/* empty state CTA spacing (shared .ps-empty) */\n.ps-production .ps-empty p { max-width: 520px; }\n\n"] }]
     }], null, { engine: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSProductionComponent, { className: "PSProductionComponent", filePath: "src/PredictiveStudio/components/ps-production.component.ts", lineNumber: 232 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PSProductionComponent, { className: "PSProductionComponent", filePath: "src/PredictiveStudio/components/ps-production.component.ts", lineNumber: 304 }); })();
 //# sourceMappingURL=ps-production.component.js.map