@memberjunction/ng-core-entity-forms 6.2.0-edge.4 → 6.2.0-edge.6

package/dist/lib/panels/model-predictions/model-prediction.panel.js

@@ -8,8 +8,8 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { RegisterClassEx } from '@memberjunction/global';
 import { BaseFormPanel } from '@memberjunction/ng-base-forms';
 import { CompositeKey, LogError, Metadata, RunView } from '@memberjunction/core';
-import { resolveOutcomeConfig, resolveOutcomeStyle, resolveScoreBand, } from '@memberjunction/predictive-studio-core';
-import { BandFor, FilterHistoryByModel, FormatLastScored, FormatValue, GaugePct, GetDistinctModelsFromHistory, ParseDrivers, ParseHistoryItem, ResolveLabel, ToNumber, ValueKind, } from './model-prediction.logic';
+import { ImportanceDisplay, resolveOutcomeConfig, resolveOutcomeStyle, resolveScoreBand, } from '@memberjunction/predictive-studio-core';
+import { PredictionDrivers, BandFor, FilterHistoryByModel, FormatLastScored, FormatValue, GaugePct, GetDistinctModelsFromHistory, ParseHistoryItem, ResolveLabel, ToNumber, ValueKind, } from './model-prediction.logic';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-base-forms";
 import * as i2 from "@angular/common";
@@ -18,10 +18,10 @@ const _forTrack1 = ($index, $item) => $item.name;
 const _forTrack2 = ($index, $item) => $item.id;
 const _forTrack3 = ($index, $item) => $item.modelId;
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵelementStart(0, "span", 22);
     i0.ɵɵtext(1, "\u00B7");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 22);
+    i0.ɵɵelementStart(2, "span", 23);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36,8 +36,8 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_C
     i0.ɵɵclassMap("fa-solid " + card_r3.BadgeIcon);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 23);
-    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_Conditional_1_Template, 1, 2, "i", 24);
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_Conditional_1_Template, 1, 2, "i", 25);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -50,10 +50,10 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_T
     i0.ɵɵtextInterpolate(card_r3.StatusLabel);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 25);
-    i0.ɵɵelement(2, "div", 26);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 26);
+    i0.ɵɵelement(2, "div", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 27)(4, "span");
+    i0.ɵɵelementStart(3, "div", 28)(4, "span");
     i0.ɵɵtext(5, "0%");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "span");
@@ -71,11 +71,11 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_17_T
     i0.ɵɵclassProp("mpp-band-low", card_r3.Band === "low")("mpp-band-mid", card_r3.Band === "mid")("mpp-band-high", card_r3.Band === "high");
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "div", 31)(1, "span", 32);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 32);
-    i0.ɵɵelement(4, "span", 33);
+    i0.ɵɵelementStart(3, "span", 33);
+    i0.ɵɵelement(4, "span", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const driver_r5 = ctx.$implicit;
@@ -87,17 +87,30 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_F
     i0.ɵɵstyleProp("width", driver_r5.RelativePct, "%");
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 28);
-    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 29);
+    i0.ɵɵelement(2, "i", 30);
     i0.ɵɵtext(3, " Top drivers ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(4, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_For_5_Template, 5, 4, "div", 30, _forTrack1);
+    i0.ɵɵrepeaterCreate(4, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_For_5_Template, 5, 4, "div", 31, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const card_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(card_r3.Drivers);
 } }
+function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 29);
+    i0.ɵɵelement(2, "i", 30);
+    i0.ɵɵtext(3, " Top drivers ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 35);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r3.DriversHiddenNote);
+} }
 function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "div", 11)(3, "div", 12);
@@ -121,7 +134,7 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Template(rf, ctx
     i0.ɵɵconditionalCreate(16, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_16_Template, 4, 4, "span", 18);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(17, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_17_Template, 10, 11, "div", 19);
-    i0.ɵɵconditionalCreate(18, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_Template, 6, 0, "div", 20);
+    i0.ɵɵconditionalCreate(18, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_18_Template, 6, 0, "div", 20)(19, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Conditional_19_Template, 6, 1, "div", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const card_r3 = ctx.$implicit;
@@ -140,11 +153,11 @@ function ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵconditional(card_r3.IsProbability ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(card_r3.Drivers.length > 0 ? 18 : -1);
+    i0.ɵɵconditional(card_r3.Drivers.length > 0 ? 18 : card_r3.DriversHidden ? 19 : -1);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵrepeaterCreate(1, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Template, 19, 9, "div", 9, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, ModelPredictionPanel_Conditional_0_Conditional_1_For_2_Template, 20, 9, "div", 9, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
@@ -161,19 +174,19 @@ function ModelPredictionPanel_Conditional_0_Conditional_8_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate(ctx_r3.HistoryItems.length);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵtext(2, " Loading prediction history\u2026 ");
     i0.ɵɵelementEnd();
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelementStart(0, "div", 37);
     i0.ɵɵtext(1, " No historical prediction runs recorded for this record yet. ");
     i0.ɵɵelementEnd();
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵelementStart(0, "button", 43);
     i0.ɵɵlistener("click", function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_For_4_Template_button_click_0_listener() { const mod_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r3.SelectModelFilter(mod_r8.modelId)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -186,11 +199,11 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditi
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "button", 41);
+    i0.ɵɵelementStart(0, "div", 39)(1, "button", 43);
     i0.ɵɵlistener("click", function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.SelectModelFilter(null)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_For_4_Template, 2, 4, "button", 42, _forTrack3);
+    i0.ɵɵrepeaterCreate(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_For_4_Template, 2, 4, "button", 44, _forTrack3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(4);
@@ -202,7 +215,7 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditi
     i0.ɵɵrepeater(ctx_r3.ModelSummaries);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
     i0.ɵɵelementEnd();
@@ -218,8 +231,8 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵclassMap("fa-solid " + item_r10.BadgeIcon);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
-    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_13_Conditional_1_Template, 1, 2, "i", 24);
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_13_Conditional_1_Template, 1, 2, "i", 25);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -232,7 +245,7 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵtextInterpolate(item_r10.StatusLabel);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "strong");
+    i0.ɵɵelementStart(0, "div", 65)(1, "strong");
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -243,11 +256,11 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵtextInterpolate1(" ", item_r10.ErrorMessage, " ");
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71)(1, "span", 72);
+    i0.ɵɵelementStart(0, "div", 73)(1, "span", 74);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 32);
-    i0.ɵɵelement(4, "span", 33);
+    i0.ɵɵelementStart(3, "span", 33);
+    i0.ɵɵelement(4, "span", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const d_r11 = ctx.$implicit;
@@ -257,12 +270,12 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵstyleProp("width", d_r11.RelativePct, "%");
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "div", 66);
-    i0.ɵɵelement(2, "i", 69);
+    i0.ɵɵelementStart(0, "div", 66)(1, "div", 68);
+    i0.ɵɵelement(2, "i", 71);
     i0.ɵɵtext(3, " Attributed Drivers");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 70);
-    i0.ɵɵrepeaterCreate(5, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_For_6_Template, 5, 3, "div", 71, _forTrack1);
+    i0.ɵɵelementStart(4, "div", 72);
+    i0.ɵɵrepeaterCreate(5, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_For_6_Template, 5, 3, "div", 73, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r10 = i0.ɵɵnextContext(2).$implicit;
@@ -270,14 +283,14 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵrepeater(item_r10.Drivers);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 59)(1, "td", 61)(2, "div", 62);
-    i0.ɵɵconditionalCreate(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_3_Template, 4, 1, "div", 63);
-    i0.ɵɵconditionalCreate(4, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_Template, 7, 0, "div", 64);
-    i0.ɵɵelementStart(5, "div", 65)(6, "div", 66);
-    i0.ɵɵelement(7, "i", 67);
+    i0.ɵɵelementStart(0, "tr", 61)(1, "td", 63)(2, "div", 64);
+    i0.ɵɵconditionalCreate(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_3_Template, 4, 1, "div", 65);
+    i0.ɵɵconditionalCreate(4, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Conditional_4_Template, 7, 0, "div", 66);
+    i0.ɵɵelementStart(5, "div", 67)(6, "div", 68);
+    i0.ɵɵelement(7, "i", 69);
     i0.ɵɵtext(8, " Result Payload");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "pre", 68);
+    i0.ɵɵelementStart(9, "pre", 70);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "json");
     i0.ɵɵelementEnd()()()()();
@@ -292,35 +305,35 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 43)(1, "td", 44);
+    i0.ɵɵelementStart(0, "tr", 45)(1, "td", 46);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 45)(4, "div", 46);
+    i0.ɵɵelementStart(3, "td", 47)(4, "div", 48);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 47);
+    i0.ɵɵelementStart(6, "div", 49);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td", 48)(9, "div", 49)(10, "span", 50);
+    i0.ɵɵelementStart(8, "td", 50)(9, "div", 51)(10, "span", 52);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_12_Template, 3, 4, "span", 51);
-    i0.ɵɵconditionalCreate(13, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_13_Template, 4, 4, "span", 52);
+    i0.ɵɵconditionalCreate(12, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_12_Template, 3, 4, "span", 53);
+    i0.ɵɵconditionalCreate(13, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_13_Template, 4, 4, "span", 54);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "td", 53)(15, "span", 54);
+    i0.ɵɵelementStart(14, "td", 55)(15, "span", 56);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "td", 55)(18, "button", 56);
+    i0.ɵɵelementStart(17, "td", 57)(18, "button", 58);
     i0.ɵɵlistener("click", function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Template_button_click_18_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.ToggleHistoryDetails(item_r10, $event)); });
     i0.ɵɵelement(19, "i");
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 57);
+    i0.ɵɵelementStart(21, "button", 59);
     i0.ɵɵlistener("click", function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Template_button_click_21_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.DrilldownToPredictionRecord(item_r10, $event)); });
-    i0.ɵɵelement(22, "i", 58);
+    i0.ɵɵelement(22, "i", 60);
     i0.ɵɵtext(23, " Open Row ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(24, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Template, 12, 5, "tr", 59);
+    i0.ɵɵconditionalCreate(24, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_Conditional_24_Template, 12, 5, "tr", 61);
 } if (rf & 2) {
     const item_r10 = ctx.$implicit;
     const ctx_r3 = i0.ɵɵnextContext(4);
@@ -351,8 +364,8 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_For_17_
     i0.ɵɵconditional(ctx_r3.ExpandedHistoryItemId === item_r10.id ? 24 : -1);
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_Template, 5, 3, "div", 37);
-    i0.ɵɵelementStart(1, "div", 38)(2, "table", 39)(3, "thead")(4, "tr")(5, "th");
+    i0.ɵɵconditionalCreate(0, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Conditional_0_Template, 5, 3, "div", 39);
+    i0.ɵɵelementStart(1, "div", 40)(2, "table", 41)(3, "thead")(4, "tr")(5, "th");
     i0.ɵɵtext(6, "Date");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "th");
@@ -364,7 +377,7 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Templat
     i0.ɵɵelementStart(11, "th");
     i0.ɵɵtext(12, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th", 40);
+    i0.ɵɵelementStart(13, "th", 42);
     i0.ɵɵtext(14, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "tbody");
@@ -378,7 +391,7 @@ function ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Templat
 } }
 function ModelPredictionPanel_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_1_Template, 3, 0, "div", 34)(2, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_2_Template, 2, 0, "div", 35)(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Template, 18, 1);
+    i0.ɵɵconditionalCreate(1, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_1_Template, 3, 0, "div", 36)(2, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_2_Template, 2, 0, "div", 37)(3, ModelPredictionPanel_Conditional_0_Conditional_11_Conditional_3_Template, 18, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
@@ -438,6 +451,8 @@ let ModelPredictionPanel = class ModelPredictionPanel extends BaseFormPanel {
         this.cdr = inject(ChangeDetectorRef);
         /** The resolved cards to render. Empty → panel renders nothing. */
         this.Cards = [];
+        /** The note shown in place of a model's hidden drivers. */
+        this.DriversHiddenNote = ImportanceDisplay.HiddenNote;
         /** True once the binding lookup has completed (success or empty). */
         this.Loaded = false;
         /** Resolved models by ID for lineage and history decoration. */
@@ -749,7 +764,8 @@ let ModelPredictionPanel = class ModelPredictionPanel extends BaseFormPanel {
             StatusLabel: statusLabel,
             BadgeColor: badgeColor,
             BadgeIcon: badgeIcon,
-            Drivers: ParseDrivers(model.FeatureImportance),
+            Drivers: PredictionDrivers.DriversForModel(model.Lineage, model.FeatureImportance),
+            DriversHidden: PredictionDrivers.DriversHidden(model.Lineage, model.FeatureImportance),
             Provenance: `${model.Pipeline} v${model.Version}`,
             LastScored: FormatLastScored(binding.LastScoredAt),
         };
@@ -764,11 +780,11 @@ let ModelPredictionPanel = class ModelPredictionPanel extends BaseFormPanel {
         return this.FormComponent?.ProviderToUse?.CurrentUser ?? new Metadata().CurrentUser;
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵModelPredictionPanel_BaseFactory; return function ModelPredictionPanel_Factory(__ngFactoryType__) { return (ɵModelPredictionPanel_BaseFactory || (ɵModelPredictionPanel_BaseFactory = i0.ɵɵgetInheritedFactory(ModelPredictionPanel)))(__ngFactoryType__ || ModelPredictionPanel); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelPredictionPanel, selectors: [["mj-model-prediction-panel"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["SectionKey", "modelPredictions", "SectionName", "Model Predictions", "Icon", "fa-solid fa-wand-magic-sparkles", 3, "Order", "Form", "FormContext", "BadgeCount"], [1, "mpp-cards"], [1, "mpp-history-section"], ["role", "button", "tabindex", "0", 1, "mpp-history-header", 3, "click"], [1, "mpp-history-title"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "mpp-history-badge"], [1, "mpp-history-chevron"], [1, "mpp-history-body"], [1, "mpp-card"], [1, "mpp-card-head"], [1, "mpp-head-left"], [1, "mpp-label"], [1, "mpp-provenance"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project", "mpp-prov-icon"], ["type", "button", "title", "View prediction history for this model", 1, "mpp-card-history-btn", 3, "click"], [1, "mpp-value-row"], [1, "mpp-value"], [1, "mpp-status-badge", 3, "class"], ["role", "img", 1, "mpp-gauge"], [1, "mpp-drivers"], ["aria-hidden", "true", 1, "mpp-dot"], [1, "mpp-scored"], [1, "mpp-status-badge"], [3, "class"], [1, "mpp-gauge-track"], [1, "mpp-gauge-fill"], [1, "mpp-gauge-scale"], [1, "mpp-drivers-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-ranking-star"], [1, "mpp-driver"], [1, "mpp-driver-name", 3, "title"], [1, "mpp-driver-bar-track"], [1, "mpp-driver-bar-fill"], [1, "mpp-history-loading"], [1, "mpp-history-empty"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "mpp-model-filters"], [1, "mpp-history-table-wrap"], [1, "mpp-history-table"], [1, "actions-th"], ["type", "button", 1, "mpp-filter-pill", 3, "click"], ["type", "button", 1, "mpp-filter-pill", 3, "active"], [1, "mpp-history-row"], [1, "mpp-col-date"], [1, "mpp-col-model"], [1, "mpp-history-model-name"], [1, "mpp-history-model-prov"], [1, "mpp-col-pred"], [1, "mpp-pred-cell"], [1, "mpp-history-pred-val"], [1, "mpp-history-pred-sub"], [1, "mpp-status-badge", "mpp-badge-sm", 3, "class"], [1, "mpp-col-status"], [1, "mpp-status-pill"], [1, "mpp-col-actions"], ["type", "button", 1, "mpp-action-btn", 3, "click", "title"], ["type", "button", "title", "Open underlying Process Run Detail record in Explorer", 1, "mpp-action-btn", "mpp-action-drilldown", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "mpp-history-detail-row"], [1, "mpp-status-badge", "mpp-badge-sm"], ["colspan", "5"], [1, "mpp-history-detail-pane"], [1, "mpp-detail-error"], [1, "mpp-detail-drivers"], [1, "mpp-detail-payload"], [1, "mpp-detail-subtitle"], [1, "fa-solid", "fa-file-code"], [1, "mpp-payload-pre"], [1, "fa-solid", "fa-ranking-star"], [1, "mpp-detail-driver-list"], [1, "mpp-detail-driver-item"], [1, "mpp-driver-name"]], template: function ModelPredictionPanel_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelPredictionPanel, selectors: [["mj-model-prediction-panel"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["SectionKey", "modelPredictions", "SectionName", "Model Predictions", "Icon", "fa-solid fa-wand-magic-sparkles", 3, "Order", "Form", "FormContext", "BadgeCount"], [1, "mpp-cards"], [1, "mpp-history-section"], ["role", "button", "tabindex", "0", 1, "mpp-history-header", 3, "click"], [1, "mpp-history-title"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "mpp-history-badge"], [1, "mpp-history-chevron"], [1, "mpp-history-body"], [1, "mpp-card"], [1, "mpp-card-head"], [1, "mpp-head-left"], [1, "mpp-label"], [1, "mpp-provenance"], ["aria-hidden", "true", 1, "fa-solid", "fa-diagram-project", "mpp-prov-icon"], ["type", "button", "title", "View prediction history for this model", 1, "mpp-card-history-btn", 3, "click"], [1, "mpp-value-row"], [1, "mpp-value"], [1, "mpp-status-badge", 3, "class"], ["role", "img", 1, "mpp-gauge"], [1, "mpp-drivers"], ["data-testid", "mpp-drivers-hidden", 1, "mpp-drivers"], ["aria-hidden", "true", 1, "mpp-dot"], [1, "mpp-scored"], [1, "mpp-status-badge"], [3, "class"], [1, "mpp-gauge-track"], [1, "mpp-gauge-fill"], [1, "mpp-gauge-scale"], [1, "mpp-drivers-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-ranking-star"], [1, "mpp-driver"], [1, "mpp-driver-name", 3, "title"], [1, "mpp-driver-bar-track"], [1, "mpp-driver-bar-fill"], [1, "mpp-drivers-note"], [1, "mpp-history-loading"], [1, "mpp-history-empty"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "mpp-model-filters"], [1, "mpp-history-table-wrap"], [1, "mpp-history-table"], [1, "actions-th"], ["type", "button", 1, "mpp-filter-pill", 3, "click"], ["type", "button", 1, "mpp-filter-pill", 3, "active"], [1, "mpp-history-row"], [1, "mpp-col-date"], [1, "mpp-col-model"], [1, "mpp-history-model-name"], [1, "mpp-history-model-prov"], [1, "mpp-col-pred"], [1, "mpp-pred-cell"], [1, "mpp-history-pred-val"], [1, "mpp-history-pred-sub"], [1, "mpp-status-badge", "mpp-badge-sm", 3, "class"], [1, "mpp-col-status"], [1, "mpp-status-pill"], [1, "mpp-col-actions"], ["type", "button", 1, "mpp-action-btn", 3, "click", "title"], ["type", "button", "title", "Open underlying Process Run Detail record in Explorer", 1, "mpp-action-btn", "mpp-action-drilldown", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "mpp-history-detail-row"], [1, "mpp-status-badge", "mpp-badge-sm"], ["colspan", "5"], [1, "mpp-history-detail-pane"], [1, "mpp-detail-error"], [1, "mpp-detail-drivers"], [1, "mpp-detail-payload"], [1, "mpp-detail-subtitle"], [1, "fa-solid", "fa-file-code"], [1, "mpp-payload-pre"], [1, "fa-solid", "fa-ranking-star"], [1, "mpp-detail-driver-list"], [1, "mpp-detail-driver-item"], [1, "mpp-driver-name"]], template: function ModelPredictionPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ModelPredictionPanel_Conditional_0_Template, 12, 9, "mj-collapsible-panel", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.HasPredictions ? 0 : -1);
-        } }, dependencies: [i1.MjCollapsiblePanelComponent, i2.JsonPipe, i2.DecimalPipe], styles: ["\n\n\n\n\n.mpp-cards[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 2px;\n}\n\n.mpp-card[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    padding: 14px 16px;\n}\n\n\n.mpp-card-head[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.mpp-label[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-provenance[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-prov-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-dot[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n.mpp-value-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 2px 0 10px;\n}\n\n\n.mpp-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 8px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: var(--mj-radius-full, 9999px);\n    line-height: 1.3;\n}\n\n.mpp-badge-sm[_ngcontent-%COMP%] {\n    padding: 1px 6px;\n    font-size: 0.7rem;\n}\n\n.mpp-badge-green[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-badge-red[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-badge-amber[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning, #d97706) 15%, transparent);\n    color: var(--mj-status-warning, #d97706);\n}\n\n.mpp-badge-blue[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info, #2563eb) 15%, transparent);\n    color: var(--mj-status-info, #2563eb);\n}\n\n.mpp-badge-gray[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.mpp-pred-cell[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-value[_ngcontent-%COMP%] {\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.1;\n    color: var(--mj-text-primary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-value-muted[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n}\n\n\n.mpp-gauge[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n}\n\n.mpp-gauge-track[_ngcontent-%COMP%] {\n    position: relative;\n    height: 10px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-gauge-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n\n.mpp-band-low[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n}\n.mpp-band-mid[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 78%, transparent);\n}\n.mpp-band-high[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n.mpp-gauge-fill.mpp-color-green[_ngcontent-%COMP%] {\n    background: var(--mj-status-success, #16a34a);\n}\n.mpp-gauge-fill.mpp-color-red[_ngcontent-%COMP%] {\n    background: var(--mj-status-danger, #dc2626);\n}\n.mpp-gauge-fill.mpp-color-amber[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning, #d97706);\n}\n.mpp-gauge-fill.mpp-color-blue[_ngcontent-%COMP%] {\n    background: var(--mj-status-info, #2563eb);\n}\n.mpp-gauge-fill.mpp-color-gray[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n}\n\n.mpp-gauge-scale[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 4px;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    font-variant-numeric: tabular-nums;\n}\n\n\n.mpp-drivers[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n\n.mpp-drivers-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.mpp-driver[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(80px, 38%) 1fr;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.mpp-driver-name[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mpp-driver-bar-track[_ngcontent-%COMP%] {\n    display: block;\n    height: 7px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-driver-bar-fill[_ngcontent-%COMP%] {\n    display: block;\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n    transition: width 0.3s ease;\n}\n\n\n.mpp-head-left[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mpp-card-history-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 3px 8px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-card-history-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n\n.mpp-history-section[_ngcontent-%COMP%] {\n    margin-top: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    overflow: hidden;\n}\n\n.mpp-history-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease;\n}\n\n.mpp-history-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-history-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 6px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n}\n\n.mpp-history-chevron[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-history-body[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n.mpp-history-empty[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n\n.mpp-model-filters[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 12px;\n}\n\n.mpp-filter-pill[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-filter-pill[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-filter-pill.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.mpp-history-table-wrap[_ngcontent-%COMP%] {\n    overflow-x: auto;\n}\n\n.mpp-history-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.8rem;\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   th.actions-th[_ngcontent-%COMP%] {\n    text-align: right;\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n    vertical-align: middle;\n}\n\n.mpp-history-row[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-row.expanded[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.mpp-col-date[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    color: var(--mj-text-secondary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-col-model[_ngcontent-%COMP%] {\n    min-width: 140px;\n}\n\n.mpp-history-model-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-model-prov[_ngcontent-%COMP%] {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-col-pred[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.mpp-history-pred-val[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-pred-sub[_ngcontent-%COMP%] {\n    margin-left: 4px;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n\n.mpp-status-pill[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 1px 7px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.mpp-status-succeeded[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-status-failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-status-pending[_ngcontent-%COMP%], \n.mpp-status-skipped[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n\n.mpp-col-actions[_ngcontent-%COMP%] {\n    text-align: right;\n    white-space: nowrap;\n}\n\n.mpp-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 7px;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    margin-left: 4px;\n    transition: all 0.15s ease;\n}\n\n.mpp-action-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-action-drilldown[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mpp-action-drilldown[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.mpp-history-detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-detail-pane[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.mpp-detail-subtitle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mpp-detail-error[_ngcontent-%COMP%] {\n    font-size: 0.78rem;\n    color: var(--mj-status-danger, #dc2626);\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 8%, transparent);\n    padding: 6px 10px;\n    border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mpp-detail-driver-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    max-width: 380px;\n}\n\n.mpp-detail-driver-item[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(80px, 45%) 1fr;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-detail-payload[_ngcontent-%COMP%] {\n    margin-top: 2px;\n}\n\n.mpp-payload-pre[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 8px 10px;\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.72rem;\n    line-height: 1.4;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    overflow-x: auto;\n    max-height: 200px;\n    color: var(--mj-text-primary);\n}"] }); }
+        } }, dependencies: [i1.MjCollapsiblePanelComponent, i2.JsonPipe, i2.DecimalPipe], styles: ["\n\n\n\n\n.mpp-cards[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 2px;\n}\n\n.mpp-card[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    padding: 14px 16px;\n}\n\n\n.mpp-card-head[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.mpp-label[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-provenance[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-prov-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-dot[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n.mpp-value-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 2px 0 10px;\n}\n\n\n.mpp-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 8px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: var(--mj-radius-full, 9999px);\n    line-height: 1.3;\n}\n\n.mpp-badge-sm[_ngcontent-%COMP%] {\n    padding: 1px 6px;\n    font-size: 0.7rem;\n}\n\n.mpp-badge-green[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-badge-red[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-badge-amber[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning, #d97706) 15%, transparent);\n    color: var(--mj-status-warning, #d97706);\n}\n\n.mpp-badge-blue[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info, #2563eb) 15%, transparent);\n    color: var(--mj-status-info, #2563eb);\n}\n\n.mpp-badge-gray[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.mpp-pred-cell[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-value[_ngcontent-%COMP%] {\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.1;\n    color: var(--mj-text-primary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-value-muted[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n}\n\n\n.mpp-gauge[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n}\n\n.mpp-gauge-track[_ngcontent-%COMP%] {\n    position: relative;\n    height: 10px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-gauge-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n\n.mpp-band-low[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n}\n.mpp-band-mid[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 78%, transparent);\n}\n.mpp-band-high[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n\n.mpp-gauge-fill.mpp-color-green[_ngcontent-%COMP%] {\n    background: var(--mj-status-success, #16a34a);\n}\n.mpp-gauge-fill.mpp-color-red[_ngcontent-%COMP%] {\n    background: var(--mj-status-danger, #dc2626);\n}\n.mpp-gauge-fill.mpp-color-amber[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning, #d97706);\n}\n.mpp-gauge-fill.mpp-color-blue[_ngcontent-%COMP%] {\n    background: var(--mj-status-info, #2563eb);\n}\n.mpp-gauge-fill.mpp-color-gray[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n}\n\n.mpp-gauge-scale[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 4px;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    font-variant-numeric: tabular-nums;\n}\n\n\n.mpp-drivers[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n\n.mpp-drivers-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.mpp-drivers-note[_ngcontent-%COMP%] {\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-driver[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(80px, 38%) 1fr;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.mpp-driver-name[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mpp-driver-bar-track[_ngcontent-%COMP%] {\n    display: block;\n    height: 7px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-driver-bar-fill[_ngcontent-%COMP%] {\n    display: block;\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n    transition: width 0.3s ease;\n}\n\n\n.mpp-head-left[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mpp-card-history-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 3px 8px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-card-history-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n\n.mpp-history-section[_ngcontent-%COMP%] {\n    margin-top: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    overflow: hidden;\n}\n\n.mpp-history-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease;\n}\n\n.mpp-history-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-history-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 6px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n}\n\n.mpp-history-chevron[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-history-body[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n.mpp-history-empty[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n\n.mpp-model-filters[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 12px;\n}\n\n.mpp-filter-pill[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-filter-pill[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-filter-pill.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.mpp-history-table-wrap[_ngcontent-%COMP%] {\n    overflow-x: auto;\n}\n\n.mpp-history-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.8rem;\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   th.actions-th[_ngcontent-%COMP%] {\n    text-align: right;\n}\n\n.mpp-history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n    vertical-align: middle;\n}\n\n.mpp-history-row[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-row.expanded[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.mpp-col-date[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    color: var(--mj-text-secondary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-col-model[_ngcontent-%COMP%] {\n    min-width: 140px;\n}\n\n.mpp-history-model-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-model-prov[_ngcontent-%COMP%] {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-col-pred[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.mpp-history-pred-val[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-pred-sub[_ngcontent-%COMP%] {\n    margin-left: 4px;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n\n.mpp-status-pill[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 1px 7px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.mpp-status-succeeded[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-status-failed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-status-pending[_ngcontent-%COMP%], \n.mpp-status-skipped[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n\n.mpp-col-actions[_ngcontent-%COMP%] {\n    text-align: right;\n    white-space: nowrap;\n}\n\n.mpp-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 7px;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    margin-left: 4px;\n    transition: all 0.15s ease;\n}\n\n.mpp-action-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-action-drilldown[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mpp-action-drilldown[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.mpp-history-detail-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-detail-pane[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.mpp-detail-subtitle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mpp-detail-error[_ngcontent-%COMP%] {\n    font-size: 0.78rem;\n    color: var(--mj-status-danger, #dc2626);\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 8%, transparent);\n    padding: 6px 10px;\n    border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mpp-detail-driver-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    max-width: 380px;\n}\n\n.mpp-detail-driver-item[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: minmax(80px, 45%) 1fr;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-detail-payload[_ngcontent-%COMP%] {\n    margin-top: 2px;\n}\n\n.mpp-payload-pre[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 8px 10px;\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.72rem;\n    line-height: 1.4;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    overflow-x: auto;\n    max-height: 200px;\n    color: var(--mj-text-primary);\n}"] }); }
 };
 ModelPredictionPanel = __decorate([
     RegisterClassEx(BaseFormPanel, {
@@ -784,9 +800,9 @@ ModelPredictionPanel = __decorate([
 export { ModelPredictionPanel };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModelPredictionPanel, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-model-prediction-panel', template: "<!--\n  Entity-agnostic model-prediction panel. Renders NOTHING unless the current\n  record's entity has active scoring bindings or historical prediction runs.\n  Driven entirely by metadata \u2014 no entity-specific or domain-specific markup.\n-->\n@if (HasPredictions) {\n  <mj-collapsible-panel\n      SectionKey=\"modelPredictions\"\n      [Order]=\"DisplayOrder\"\n      SectionName=\"Model Predictions\"\n      Icon=\"fa-solid fa-wand-magic-sparkles\"\n      [Form]=\"FormComponent\"\n      [FormContext]=\"FormContext\"\n      [BadgeCount]=\"Cards.length\">\n\n    <!-- Active prediction cards -->\n    @if (Cards.length > 0) {\n      <div class=\"mpp-cards\">\n        @for (card of Cards; track card.BindingId) {\n          <div class=\"mpp-card\">\n\n            <!-- Header: label + provenance + history button -->\n            <div class=\"mpp-card-head\">\n              <div class=\"mpp-head-left\">\n                <div class=\"mpp-label\">{{ card.Label }}</div>\n                <div class=\"mpp-provenance\">\n                  <i class=\"fa-solid fa-diagram-project mpp-prov-icon\" aria-hidden=\"true\"></i>\n                  <span>{{ card.Provenance }}</span>\n                  @if (card.LastScored) {\n                    <span class=\"mpp-dot\" aria-hidden=\"true\">\u00B7</span>\n                    <span class=\"mpp-scored\">Scored {{ card.LastScored }}</span>\n                  }\n                </div>\n              </div>\n              <button type=\"button\" \n                      class=\"mpp-card-history-btn\" \n                      (click)=\"OpenHistoryForModel(card.modelId, $event)\" \n                      title=\"View prediction history for this model\">\n                <i class=\"fa-solid fa-clock-rotate-left\"></i> History\n              </button>\n            </div>\n\n            <!-- Value -->\n            <div class=\"mpp-value-row\">\n              <span class=\"mpp-value\" [class.mpp-value-muted]=\"card.DisplayValue === '\u2014'\">\n                {{ card.DisplayValue }}\n              </span>\n              @if (card.StatusLabel) {\n                <span class=\"mpp-status-badge\" [class]=\"'mpp-badge-' + card.BadgeColor\">\n                  @if (card.BadgeIcon) {\n                    <i [class]=\"'fa-solid ' + card.BadgeIcon\"></i>\n                  }\n                  <span>{{ card.StatusLabel }}</span>\n                </span>\n              }\n            </div>\n\n            <!-- Probability gauge \u2014 semantic color matching outcome polarity -->\n            @if (card.IsProbability) {\n              <div class=\"mpp-gauge\" role=\"img\"\n                   [attr.aria-label]=\"card.Label + ' ' + card.DisplayValue + (card.StatusLabel ? ', ' + card.StatusLabel : '')\">\n                <div class=\"mpp-gauge-track\">\n                  <div class=\"mpp-gauge-fill\"\n                       [class.mpp-band-low]=\"card.Band === 'low'\"\n                       [class.mpp-band-mid]=\"card.Band === 'mid'\"\n                       [class.mpp-band-high]=\"card.Band === 'high'\"\n                       [class]=\"'mpp-color-' + card.BadgeColor\"\n                       [style.width.%]=\"card.GaugePct\"></div>\n                </div>\n                <div class=\"mpp-gauge-scale\">\n                  <span>0%</span>\n                  <span>50%</span>\n                  <span>100%</span>\n                </div>\n              </div>\n            }\n\n            <!-- Top drivers (feature importance) \u2014 omitted cleanly when unavailable -->\n            @if (card.Drivers.length > 0) {\n              <div class=\"mpp-drivers\">\n                <div class=\"mpp-drivers-title\">\n                  <i class=\"fa-solid fa-ranking-star\" aria-hidden=\"true\"></i>\n                  Top drivers\n                </div>\n                @for (driver of card.Drivers; track driver.name) {\n                  <div class=\"mpp-driver\">\n                    <span class=\"mpp-driver-name\" [title]=\"driver.name\">{{ driver.name }}</span>\n                    <span class=\"mpp-driver-bar-track\">\n                      <span class=\"mpp-driver-bar-fill\" [style.width.%]=\"driver.RelativePct\"></span>\n                    </span>\n                  </div>\n                }\n              </div>\n            }\n\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Prediction History Section -->\n    <div class=\"mpp-history-section\">\n      <div class=\"mpp-history-header\" (click)=\"ToggleHistorySection()\" role=\"button\" tabindex=\"0\">\n        <div class=\"mpp-history-title\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          <span>Prediction History</span>\n          @if (HistoryItems.length > 0) {\n            <span class=\"mpp-history-badge\">{{ HistoryItems.length }}</span>\n          }\n        </div>\n        <div class=\"mpp-history-chevron\">\n          <i [class]=\"ShowHistorySection ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n        </div>\n      </div>\n\n      @if (ShowHistorySection) {\n        <div class=\"mpp-history-body\">\n          @if (LoadingHistory) {\n            <div class=\"mpp-history-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prediction history\u2026\n            </div>\n          } @else if (HistoryItems.length === 0) {\n            <div class=\"mpp-history-empty\">\n              No historical prediction runs recorded for this record yet.\n            </div>\n          } @else {\n            <!-- Multi-model filter tabs if multiple models present -->\n            @if (ModelSummaries.length > 1) {\n              <div class=\"mpp-model-filters\">\n                <button type=\"button\" \n                        class=\"mpp-filter-pill\" \n                        [class.active]=\"SelectedModelId === null || SelectedModelId === 'ALL'\"\n                        (click)=\"SelectModelFilter(null)\">\n                  All Models ({{ HistoryItems.length }})\n                </button>\n                @for (mod of ModelSummaries; track mod.modelId) {\n                  <button type=\"button\" \n                          class=\"mpp-filter-pill\" \n                          [class.active]=\"SelectedModelId === mod.modelId\"\n                          (click)=\"SelectModelFilter(mod.modelId)\">\n                    {{ mod.ModelName }} ({{ mod.count }})\n                  </button>\n                }\n              </div>\n            }\n\n            <!-- History table -->\n            <div class=\"mpp-history-table-wrap\">\n              <table class=\"mpp-history-table\">\n                <thead>\n                  <tr>\n                    <th>Date</th>\n                    <th>Model</th>\n                    <th>Prediction</th>\n                    <th>Status</th>\n                    <th class=\"actions-th\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (item of FilteredHistory; track item.id) {\n                    <tr class=\"mpp-history-row\" [class.expanded]=\"ExpandedHistoryItemId === item.id\">\n                      <td class=\"mpp-col-date\">{{ item.FormattedTime }}</td>\n                      <td class=\"mpp-col-model\">\n                        <div class=\"mpp-history-model-name\">{{ item.ModelName }}</div>\n                        <div class=\"mpp-history-model-prov\">{{ item.Provenance }}</div>\n                      </td>\n                      <td class=\"mpp-col-pred\">\n                        <div class=\"mpp-pred-cell\">\n                          <span class=\"mpp-history-pred-val\">{{ item.DisplayValue }}</span>\n                          @if (item.PredictedClass && item.NumericValue != null && item.IsProbability) {\n                            <span class=\"mpp-history-pred-sub\">({{ (item.NumericValue * 100) | number:'1.0-1' }}%)</span>\n                          }\n                          @if (item.StatusLabel) {\n                            <span class=\"mpp-status-badge mpp-badge-sm\" [class]=\"'mpp-badge-' + item.BadgeColor\">\n                              @if (item.BadgeIcon) {\n                                <i [class]=\"'fa-solid ' + item.BadgeIcon\"></i>\n                              }\n                              <span>{{ item.StatusLabel }}</span>\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td class=\"mpp-col-status\">\n                        <span class=\"mpp-status-pill\" [class]=\"'mpp-status-' + item.status.toLowerCase()\">\n                          {{ item.status }}\n                        </span>\n                      </td>\n                      <td class=\"mpp-col-actions\">\n                        <button type=\"button\" \n                                class=\"mpp-action-btn\"\n                                (click)=\"ToggleHistoryDetails(item, $event)\" \n                                [title]=\"ExpandedHistoryItemId === item.id ? 'Hide details' : 'Inspect payload & drivers'\">\n                          <i [class]=\"ExpandedHistoryItemId === item.id ? 'fa-solid fa-chevron-up' : 'fa-solid fa-code'\"></i>\n                          {{ ExpandedHistoryItemId === item.id ? 'Close' : 'Inspect' }}\n                        </button>\n                        <button type=\"button\" \n                                class=\"mpp-action-btn mpp-action-drilldown\"\n                                (click)=\"DrilldownToPredictionRecord(item, $event)\"\n                                title=\"Open underlying Process Run Detail record in Explorer\">\n                          <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open Row\n                        </button>\n                      </td>\n                    </tr>\n                    @if (ExpandedHistoryItemId === item.id) {\n                      <tr class=\"mpp-history-detail-row\">\n                        <td colspan=\"5\">\n                          <div class=\"mpp-history-detail-pane\">\n                            @if (item.ErrorMessage) {\n                              <div class=\"mpp-detail-error\">\n                                <strong>Error:</strong> {{ item.ErrorMessage }}\n                              </div>\n                            }\n                            @if (item.Drivers.length > 0) {\n                              <div class=\"mpp-detail-drivers\">\n                                <div class=\"mpp-detail-subtitle\"><i class=\"fa-solid fa-ranking-star\"></i> Attributed Drivers</div>\n                                <div class=\"mpp-detail-driver-list\">\n                                  @for (d of item.Drivers; track d.name) {\n                                    <div class=\"mpp-detail-driver-item\">\n                                      <span class=\"mpp-driver-name\">{{ d.name }}</span>\n                                      <span class=\"mpp-driver-bar-track\">\n                                        <span class=\"mpp-driver-bar-fill\" [style.width.%]=\"d.RelativePct\"></span>\n                                      </span>\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            }\n                            <div class=\"mpp-detail-payload\">\n                              <div class=\"mpp-detail-subtitle\"><i class=\"fa-solid fa-file-code\"></i> Result Payload</div>\n                              <pre class=\"mpp-payload-pre\">{{ item.RawPayload | json }}</pre>\n                            </div>\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n  </mj-collapsible-panel>\n}\n", styles: ["/* Entity-agnostic model-prediction panel.\n   Design-token-clean: every color is a --mj-* semantic token. The gauge bands\n   are intentionally NEUTRAL \u2014 they encode position on the value axis (low/mid/high)\n   via opacity of a single brand color, never green=good / red=bad. */\n\n.mpp-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 2px;\n}\n\n.mpp-card {\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    padding: 14px 16px;\n}\n\n/* ---- Header ---- */\n.mpp-card-head {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.mpp-label {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-provenance {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-prov-icon {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-dot {\n    color: var(--mj-text-disabled);\n}\n\n/* ---- Primary value ---- */\n.mpp-value-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 2px 0 10px;\n}\n\n/* ---- Status Badge ---- */\n.mpp-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 8px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: var(--mj-radius-full, 9999px);\n    line-height: 1.3;\n}\n\n.mpp-badge-sm {\n    padding: 1px 6px;\n    font-size: 0.7rem;\n}\n\n.mpp-badge-green {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-badge-red {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-badge-amber {\n    background: color-mix(in srgb, var(--mj-status-warning, #d97706) 15%, transparent);\n    color: var(--mj-status-warning, #d97706);\n}\n\n.mpp-badge-blue {\n    background: color-mix(in srgb, var(--mj-status-info, #2563eb) 15%, transparent);\n    color: var(--mj-status-info, #2563eb);\n}\n\n.mpp-badge-gray {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.mpp-pred-cell {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-value {\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.1;\n    color: var(--mj-text-primary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-value-muted {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n}\n\n/* ---- Gauge (neutral tercile) ---- */\n.mpp-gauge {\n    margin-bottom: 4px;\n}\n\n.mpp-gauge-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-gauge-fill {\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n/* Band shading: same brand hue, varied opacity = neutral position cue only. */\n.mpp-band-low {\n    background: color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n}\n.mpp-band-mid {\n    background: color-mix(in srgb, var(--mj-brand-primary) 78%, transparent);\n}\n.mpp-band-high {\n    background: var(--mj-brand-primary);\n}\n\n/* Outcome polarity gauge fill colors */\n.mpp-gauge-fill.mpp-color-green {\n    background: var(--mj-status-success, #16a34a);\n}\n.mpp-gauge-fill.mpp-color-red {\n    background: var(--mj-status-danger, #dc2626);\n}\n.mpp-gauge-fill.mpp-color-amber {\n    background: var(--mj-status-warning, #d97706);\n}\n.mpp-gauge-fill.mpp-color-blue {\n    background: var(--mj-status-info, #2563eb);\n}\n.mpp-gauge-fill.mpp-color-gray {\n    background: var(--mj-text-muted);\n}\n\n.mpp-gauge-scale {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 4px;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    font-variant-numeric: tabular-nums;\n}\n\n/* ---- Drivers ---- */\n.mpp-drivers {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n\n.mpp-drivers-title {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.mpp-driver {\n    display: grid;\n    grid-template-columns: minmax(80px, 38%) 1fr;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.mpp-driver-name {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mpp-driver-bar-track {\n    display: block;\n    height: 7px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-driver-bar-fill {\n    display: block;\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n    transition: width 0.3s ease;\n}\n\n/* ---- Card History Action Button ---- */\n.mpp-head-left {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mpp-card-history-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 3px 8px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-card-history-btn:hover {\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* ---- Prediction History Section ---- */\n.mpp-history-section {\n    margin-top: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    overflow: hidden;\n}\n\n.mpp-history-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease;\n}\n\n.mpp-history-header:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-title i {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-history-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 6px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n}\n\n.mpp-history-chevron {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-history-body {\n    padding: 12px 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-loading {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n.mpp-history-empty {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n/* ---- Multi-Model Filter Tabs ---- */\n.mpp-model-filters {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 12px;\n}\n\n.mpp-filter-pill {\n    padding: 3px 10px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-filter-pill:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-filter-pill.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n    border-color: var(--mj-brand-primary);\n}\n\n/* ---- History Table ---- */\n.mpp-history-table-wrap {\n    overflow-x: auto;\n}\n\n.mpp-history-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.8rem;\n}\n\n.mpp-history-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-table th.actions-th {\n    text-align: right;\n}\n\n.mpp-history-table td {\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n    vertical-align: middle;\n}\n\n.mpp-history-row:hover td {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-row.expanded td {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.mpp-col-date {\n    white-space: nowrap;\n    color: var(--mj-text-secondary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-col-model {\n    min-width: 140px;\n}\n\n.mpp-history-model-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-model-prov {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-col-pred {\n    white-space: nowrap;\n}\n\n.mpp-history-pred-val {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-pred-sub {\n    margin-left: 4px;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n/* Status Pill */\n.mpp-status-pill {\n    display: inline-block;\n    padding: 1px 7px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.mpp-status-succeeded {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-status-failed {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-status-pending,\n.mpp-status-skipped {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n/* Actions in History Row */\n.mpp-col-actions {\n    text-align: right;\n    white-space: nowrap;\n}\n\n.mpp-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 7px;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    margin-left: 4px;\n    transition: all 0.15s ease;\n}\n\n.mpp-action-btn:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-action-drilldown {\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mpp-action-drilldown:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n}\n\n/* Inspection Drawer */\n.mpp-history-detail-row td {\n    padding: 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-detail-pane {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.mpp-detail-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mpp-detail-error {\n    font-size: 0.78rem;\n    color: var(--mj-status-danger, #dc2626);\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 8%, transparent);\n    padding: 6px 10px;\n    border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mpp-detail-driver-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    max-width: 380px;\n}\n\n.mpp-detail-driver-item {\n    display: grid;\n    grid-template-columns: minmax(80px, 45%) 1fr;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-detail-payload {\n    margin-top: 2px;\n}\n\n.mpp-payload-pre {\n    margin: 0;\n    padding: 8px 10px;\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.72rem;\n    line-height: 1.4;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    overflow-x: auto;\n    max-height: 200px;\n    color: var(--mj-text-primary);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-model-prediction-panel', template: "<!--\n  Entity-agnostic model-prediction panel. Renders NOTHING unless the current\n  record's entity has active scoring bindings or historical prediction runs.\n  Driven entirely by metadata \u2014 no entity-specific or domain-specific markup.\n-->\n@if (HasPredictions) {\n  <mj-collapsible-panel\n      SectionKey=\"modelPredictions\"\n      [Order]=\"DisplayOrder\"\n      SectionName=\"Model Predictions\"\n      Icon=\"fa-solid fa-wand-magic-sparkles\"\n      [Form]=\"FormComponent\"\n      [FormContext]=\"FormContext\"\n      [BadgeCount]=\"Cards.length\">\n\n    <!-- Active prediction cards -->\n    @if (Cards.length > 0) {\n      <div class=\"mpp-cards\">\n        @for (card of Cards; track card.BindingId) {\n          <div class=\"mpp-card\">\n\n            <!-- Header: label + provenance + history button -->\n            <div class=\"mpp-card-head\">\n              <div class=\"mpp-head-left\">\n                <div class=\"mpp-label\">{{ card.Label }}</div>\n                <div class=\"mpp-provenance\">\n                  <i class=\"fa-solid fa-diagram-project mpp-prov-icon\" aria-hidden=\"true\"></i>\n                  <span>{{ card.Provenance }}</span>\n                  @if (card.LastScored) {\n                    <span class=\"mpp-dot\" aria-hidden=\"true\">\u00B7</span>\n                    <span class=\"mpp-scored\">Scored {{ card.LastScored }}</span>\n                  }\n                </div>\n              </div>\n              <button type=\"button\" \n                      class=\"mpp-card-history-btn\" \n                      (click)=\"OpenHistoryForModel(card.modelId, $event)\" \n                      title=\"View prediction history for this model\">\n                <i class=\"fa-solid fa-clock-rotate-left\"></i> History\n              </button>\n            </div>\n\n            <!-- Value -->\n            <div class=\"mpp-value-row\">\n              <span class=\"mpp-value\" [class.mpp-value-muted]=\"card.DisplayValue === '\u2014'\">\n                {{ card.DisplayValue }}\n              </span>\n              @if (card.StatusLabel) {\n                <span class=\"mpp-status-badge\" [class]=\"'mpp-badge-' + card.BadgeColor\">\n                  @if (card.BadgeIcon) {\n                    <i [class]=\"'fa-solid ' + card.BadgeIcon\"></i>\n                  }\n                  <span>{{ card.StatusLabel }}</span>\n                </span>\n              }\n            </div>\n\n            <!-- Probability gauge \u2014 semantic color matching outcome polarity -->\n            @if (card.IsProbability) {\n              <div class=\"mpp-gauge\" role=\"img\"\n                   [attr.aria-label]=\"card.Label + ' ' + card.DisplayValue + (card.StatusLabel ? ', ' + card.StatusLabel : '')\">\n                <div class=\"mpp-gauge-track\">\n                  <div class=\"mpp-gauge-fill\"\n                       [class.mpp-band-low]=\"card.Band === 'low'\"\n                       [class.mpp-band-mid]=\"card.Band === 'mid'\"\n                       [class.mpp-band-high]=\"card.Band === 'high'\"\n                       [class]=\"'mpp-color-' + card.BadgeColor\"\n                       [style.width.%]=\"card.GaugePct\"></div>\n                </div>\n                <div class=\"mpp-gauge-scale\">\n                  <span>0%</span>\n                  <span>50%</span>\n                  <span>100%</span>\n                </div>\n              </div>\n            }\n\n            <!-- Top drivers (feature importance) \u2014 omitted cleanly when unavailable -->\n            @if (card.Drivers.length > 0) {\n              <div class=\"mpp-drivers\">\n                <div class=\"mpp-drivers-title\">\n                  <i class=\"fa-solid fa-ranking-star\" aria-hidden=\"true\"></i>\n                  Top drivers\n                </div>\n                @for (driver of card.Drivers; track driver.name) {\n                  <div class=\"mpp-driver\">\n                    <span class=\"mpp-driver-name\" [title]=\"driver.name\">{{ driver.name }}</span>\n                    <span class=\"mpp-driver-bar-track\">\n                      <span class=\"mpp-driver-bar-fill\" [style.width.%]=\"driver.RelativePct\"></span>\n                    </span>\n                  </div>\n                }\n              </div>\n            } @else if (card.DriversHidden) {\n              <div class=\"mpp-drivers\" data-testid=\"mpp-drivers-hidden\">\n                <div class=\"mpp-drivers-title\">\n                  <i class=\"fa-solid fa-ranking-star\" aria-hidden=\"true\"></i>\n                  Top drivers\n                </div>\n                <div class=\"mpp-drivers-note\">{{ DriversHiddenNote }}</div>\n              </div>\n            }\n\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Prediction History Section -->\n    <div class=\"mpp-history-section\">\n      <div class=\"mpp-history-header\" (click)=\"ToggleHistorySection()\" role=\"button\" tabindex=\"0\">\n        <div class=\"mpp-history-title\">\n          <i class=\"fa-solid fa-clock-rotate-left\"></i>\n          <span>Prediction History</span>\n          @if (HistoryItems.length > 0) {\n            <span class=\"mpp-history-badge\">{{ HistoryItems.length }}</span>\n          }\n        </div>\n        <div class=\"mpp-history-chevron\">\n          <i [class]=\"ShowHistorySection ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n        </div>\n      </div>\n\n      @if (ShowHistorySection) {\n        <div class=\"mpp-history-body\">\n          @if (LoadingHistory) {\n            <div class=\"mpp-history-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prediction history\u2026\n            </div>\n          } @else if (HistoryItems.length === 0) {\n            <div class=\"mpp-history-empty\">\n              No historical prediction runs recorded for this record yet.\n            </div>\n          } @else {\n            <!-- Multi-model filter tabs if multiple models present -->\n            @if (ModelSummaries.length > 1) {\n              <div class=\"mpp-model-filters\">\n                <button type=\"button\" \n                        class=\"mpp-filter-pill\" \n                        [class.active]=\"SelectedModelId === null || SelectedModelId === 'ALL'\"\n                        (click)=\"SelectModelFilter(null)\">\n                  All Models ({{ HistoryItems.length }})\n                </button>\n                @for (mod of ModelSummaries; track mod.modelId) {\n                  <button type=\"button\" \n                          class=\"mpp-filter-pill\" \n                          [class.active]=\"SelectedModelId === mod.modelId\"\n                          (click)=\"SelectModelFilter(mod.modelId)\">\n                    {{ mod.ModelName }} ({{ mod.count }})\n                  </button>\n                }\n              </div>\n            }\n\n            <!-- History table -->\n            <div class=\"mpp-history-table-wrap\">\n              <table class=\"mpp-history-table\">\n                <thead>\n                  <tr>\n                    <th>Date</th>\n                    <th>Model</th>\n                    <th>Prediction</th>\n                    <th>Status</th>\n                    <th class=\"actions-th\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (item of FilteredHistory; track item.id) {\n                    <tr class=\"mpp-history-row\" [class.expanded]=\"ExpandedHistoryItemId === item.id\">\n                      <td class=\"mpp-col-date\">{{ item.FormattedTime }}</td>\n                      <td class=\"mpp-col-model\">\n                        <div class=\"mpp-history-model-name\">{{ item.ModelName }}</div>\n                        <div class=\"mpp-history-model-prov\">{{ item.Provenance }}</div>\n                      </td>\n                      <td class=\"mpp-col-pred\">\n                        <div class=\"mpp-pred-cell\">\n                          <span class=\"mpp-history-pred-val\">{{ item.DisplayValue }}</span>\n                          @if (item.PredictedClass && item.NumericValue != null && item.IsProbability) {\n                            <span class=\"mpp-history-pred-sub\">({{ (item.NumericValue * 100) | number:'1.0-1' }}%)</span>\n                          }\n                          @if (item.StatusLabel) {\n                            <span class=\"mpp-status-badge mpp-badge-sm\" [class]=\"'mpp-badge-' + item.BadgeColor\">\n                              @if (item.BadgeIcon) {\n                                <i [class]=\"'fa-solid ' + item.BadgeIcon\"></i>\n                              }\n                              <span>{{ item.StatusLabel }}</span>\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td class=\"mpp-col-status\">\n                        <span class=\"mpp-status-pill\" [class]=\"'mpp-status-' + item.status.toLowerCase()\">\n                          {{ item.status }}\n                        </span>\n                      </td>\n                      <td class=\"mpp-col-actions\">\n                        <button type=\"button\" \n                                class=\"mpp-action-btn\"\n                                (click)=\"ToggleHistoryDetails(item, $event)\" \n                                [title]=\"ExpandedHistoryItemId === item.id ? 'Hide details' : 'Inspect payload & drivers'\">\n                          <i [class]=\"ExpandedHistoryItemId === item.id ? 'fa-solid fa-chevron-up' : 'fa-solid fa-code'\"></i>\n                          {{ ExpandedHistoryItemId === item.id ? 'Close' : 'Inspect' }}\n                        </button>\n                        <button type=\"button\" \n                                class=\"mpp-action-btn mpp-action-drilldown\"\n                                (click)=\"DrilldownToPredictionRecord(item, $event)\"\n                                title=\"Open underlying Process Run Detail record in Explorer\">\n                          <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open Row\n                        </button>\n                      </td>\n                    </tr>\n                    @if (ExpandedHistoryItemId === item.id) {\n                      <tr class=\"mpp-history-detail-row\">\n                        <td colspan=\"5\">\n                          <div class=\"mpp-history-detail-pane\">\n                            @if (item.ErrorMessage) {\n                              <div class=\"mpp-detail-error\">\n                                <strong>Error:</strong> {{ item.ErrorMessage }}\n                              </div>\n                            }\n                            @if (item.Drivers.length > 0) {\n                              <div class=\"mpp-detail-drivers\">\n                                <div class=\"mpp-detail-subtitle\"><i class=\"fa-solid fa-ranking-star\"></i> Attributed Drivers</div>\n                                <div class=\"mpp-detail-driver-list\">\n                                  @for (d of item.Drivers; track d.name) {\n                                    <div class=\"mpp-detail-driver-item\">\n                                      <span class=\"mpp-driver-name\">{{ d.name }}</span>\n                                      <span class=\"mpp-driver-bar-track\">\n                                        <span class=\"mpp-driver-bar-fill\" [style.width.%]=\"d.RelativePct\"></span>\n                                      </span>\n                                    </div>\n                                  }\n                                </div>\n                              </div>\n                            }\n                            <div class=\"mpp-detail-payload\">\n                              <div class=\"mpp-detail-subtitle\"><i class=\"fa-solid fa-file-code\"></i> Result Payload</div>\n                              <pre class=\"mpp-payload-pre\">{{ item.RawPayload | json }}</pre>\n                            </div>\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n  </mj-collapsible-panel>\n}\n", styles: ["/* Entity-agnostic model-prediction panel.\n   Design-token-clean: every color is a --mj-* semantic token. The gauge bands\n   are intentionally NEUTRAL \u2014 they encode position on the value axis (low/mid/high)\n   via opacity of a single brand color, never green=good / red=bad. */\n\n.mpp-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 2px;\n}\n\n.mpp-card {\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    padding: 14px 16px;\n}\n\n/* ---- Header ---- */\n.mpp-card-head {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.mpp-label {\n    font-size: 0.95rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-provenance {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-prov-icon {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-dot {\n    color: var(--mj-text-disabled);\n}\n\n/* ---- Primary value ---- */\n.mpp-value-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 2px 0 10px;\n}\n\n/* ---- Status Badge ---- */\n.mpp-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 2px 8px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    border-radius: var(--mj-radius-full, 9999px);\n    line-height: 1.3;\n}\n\n.mpp-badge-sm {\n    padding: 1px 6px;\n    font-size: 0.7rem;\n}\n\n.mpp-badge-green {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-badge-red {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-badge-amber {\n    background: color-mix(in srgb, var(--mj-status-warning, #d97706) 15%, transparent);\n    color: var(--mj-status-warning, #d97706);\n}\n\n.mpp-badge-blue {\n    background: color-mix(in srgb, var(--mj-status-info, #2563eb) 15%, transparent);\n    color: var(--mj-status-info, #2563eb);\n}\n\n.mpp-badge-gray {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n.mpp-pred-cell {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-value {\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.1;\n    color: var(--mj-text-primary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-value-muted {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n}\n\n/* ---- Gauge (neutral tercile) ---- */\n.mpp-gauge {\n    margin-bottom: 4px;\n}\n\n.mpp-gauge-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-gauge-fill {\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-brand-primary);\n    transition: width 0.3s ease;\n}\n\n/* Band shading: same brand hue, varied opacity = neutral position cue only. */\n.mpp-band-low {\n    background: color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n}\n.mpp-band-mid {\n    background: color-mix(in srgb, var(--mj-brand-primary) 78%, transparent);\n}\n.mpp-band-high {\n    background: var(--mj-brand-primary);\n}\n\n/* Outcome polarity gauge fill colors */\n.mpp-gauge-fill.mpp-color-green {\n    background: var(--mj-status-success, #16a34a);\n}\n.mpp-gauge-fill.mpp-color-red {\n    background: var(--mj-status-danger, #dc2626);\n}\n.mpp-gauge-fill.mpp-color-amber {\n    background: var(--mj-status-warning, #d97706);\n}\n.mpp-gauge-fill.mpp-color-blue {\n    background: var(--mj-status-info, #2563eb);\n}\n.mpp-gauge-fill.mpp-color-gray {\n    background: var(--mj-text-muted);\n}\n\n.mpp-gauge-scale {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 4px;\n    font-size: 0.68rem;\n    color: var(--mj-text-muted);\n    font-variant-numeric: tabular-nums;\n}\n\n/* ---- Drivers ---- */\n.mpp-drivers {\n    margin-top: 12px;\n    padding-top: 10px;\n    border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n\n.mpp-drivers-title {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.mpp-drivers-note {\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-driver {\n    display: grid;\n    grid-template-columns: minmax(80px, 38%) 1fr;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 6px;\n}\n\n.mpp-driver-name {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mpp-driver-bar-track {\n    display: block;\n    height: 7px;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.mpp-driver-bar-fill {\n    display: block;\n    height: 100%;\n    border-radius: var(--mj-radius-full, 9999px);\n    background: color-mix(in srgb, var(--mj-brand-primary) 70%, transparent);\n    transition: width 0.3s ease;\n}\n\n/* ---- Card History Action Button ---- */\n.mpp-head-left {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.mpp-card-history-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 3px 8px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-card-history-btn:hover {\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n/* ---- Prediction History Section ---- */\n.mpp-history-section {\n    margin-top: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-md, 8px);\n    background: var(--mj-bg-surface-card);\n    overflow: hidden;\n}\n\n.mpp-history-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s ease;\n}\n\n.mpp-history-header:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-title i {\n    color: var(--mj-brand-primary);\n}\n\n.mpp-history-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 6px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n}\n\n.mpp-history-chevron {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-history-body {\n    padding: 12px 14px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-loading {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n.mpp-history-empty {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n    padding: 8px 0;\n}\n\n/* ---- Multi-Model Filter Tabs ---- */\n.mpp-model-filters {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 12px;\n}\n\n.mpp-filter-pill {\n    padding: 3px 10px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 999px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mpp-filter-pill:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-filter-pill.active {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse, #fff);\n    border-color: var(--mj-brand-primary);\n}\n\n/* ---- History Table ---- */\n.mpp-history-table-wrap {\n    overflow-x: auto;\n}\n\n.mpp-history-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.8rem;\n}\n\n.mpp-history-table th {\n    text-align: left;\n    font-size: 0.7rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-muted);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-table th.actions-th {\n    text-align: right;\n}\n\n.mpp-history-table td {\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n    vertical-align: middle;\n}\n\n.mpp-history-row:hover td {\n    background: var(--mj-bg-surface-hover);\n}\n\n.mpp-history-row.expanded td {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.mpp-col-date {\n    white-space: nowrap;\n    color: var(--mj-text-secondary);\n    font-variant-numeric: tabular-nums;\n}\n\n.mpp-col-model {\n    min-width: 140px;\n}\n\n.mpp-history-model-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-model-prov {\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.mpp-col-pred {\n    white-space: nowrap;\n}\n\n.mpp-history-pred-val {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.mpp-history-pred-sub {\n    margin-left: 4px;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n/* Status Pill */\n.mpp-status-pill {\n    display: inline-block;\n    padding: 1px 7px;\n    font-size: 0.7rem;\n    font-weight: 600;\n    border-radius: 999px;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n}\n\n.mpp-status-succeeded {\n    background: color-mix(in srgb, var(--mj-status-success, #16a34a) 15%, transparent);\n    color: var(--mj-status-success, #16a34a);\n}\n\n.mpp-status-failed {\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 15%, transparent);\n    color: var(--mj-status-danger, #dc2626);\n}\n\n.mpp-status-pending,\n.mpp-status-skipped {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n}\n\n/* Actions in History Row */\n.mpp-col-actions {\n    text-align: right;\n    white-space: nowrap;\n}\n\n.mpp-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 7px;\n    font-size: 0.72rem;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    cursor: pointer;\n    margin-left: 4px;\n    transition: all 0.15s ease;\n}\n\n.mpp-action-btn:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-hover, var(--mj-brand-primary));\n}\n\n.mpp-action-drilldown {\n    color: var(--mj-brand-primary);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mpp-action-drilldown:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    border-color: var(--mj-brand-primary);\n}\n\n/* Inspection Drawer */\n.mpp-history-detail-row td {\n    padding: 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mpp-history-detail-pane {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.mpp-detail-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.72rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mpp-detail-error {\n    font-size: 0.78rem;\n    color: var(--mj-status-danger, #dc2626);\n    background: color-mix(in srgb, var(--mj-status-danger, #dc2626) 8%, transparent);\n    padding: 6px 10px;\n    border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mpp-detail-driver-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    max-width: 380px;\n}\n\n.mpp-detail-driver-item {\n    display: grid;\n    grid-template-columns: minmax(80px, 45%) 1fr;\n    align-items: center;\n    gap: 8px;\n}\n\n.mpp-detail-payload {\n    margin-top: 2px;\n}\n\n.mpp-payload-pre {\n    margin: 0;\n    padding: 8px 10px;\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.72rem;\n    line-height: 1.4;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: var(--mj-radius-sm, 4px);\n    overflow-x: auto;\n    max-height: 200px;\n    color: var(--mj-text-primary);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelPredictionPanel, { className: "ModelPredictionPanel", filePath: "src/lib/panels/model-predictions/model-prediction.panel.ts", lineNumber: 101 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelPredictionPanel, { className: "ModelPredictionPanel", filePath: "src/lib/panels/model-predictions/model-prediction.panel.ts", lineNumber: 104 }); })();
 /** Tree-shake guard — call this from the consuming module's loader. */
 export function LoadModelPredictionPanel() { }
 //# sourceMappingURL=model-prediction.panel.js.map