@memberjunction/ng-dashboards 3.3.0 → 3.4.0

package/dist/Testing/components/testing-analytics.component.js

@@ -1,493 +1,897 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { takeUntil, map } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/testing-instrumentation.service";
-import * as i2 from "@angular/forms";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.days;
 const _forTrack1 = ($index, $item) => $item.testName;
 const _forTrack2 = ($index, $item) => $item.label;
-const _c0 = () => [];
+const _forTrack3 = ($index, $item) => $item.version;
 function TestingAnalyticsComponent_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 6);
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function TestingAnalyticsComponent_For_9_Template_button_click_0_listener() { const range_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnTimeRangeSelect(range_r2.days)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const range_r1 = ctx.$implicit;
-    i0.ɵɵproperty("value", range_r1.days);
+    const range_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r2.SelectedDays === range_r2.days);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(range_r1.label);
+    i0.ɵɵtextInterpolate1(" ", range_r2.label, " ");
 } }
-function TestingAnalyticsComponent_For_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 41)(2, "span", 42);
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "date");
+function TestingAnalyticsComponent_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No trend data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "span", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36);
+    i0.ɵɵelement(4, "div", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 43);
+    i0.ɵɵelementStart(5, "span", 38);
     i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 44)(8, "div", 45);
-    i0.ɵɵelement(9, "i", 46);
-    i0.ɵɵelementStart(10, "span");
-    i0.ɵɵtext(11);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 47);
-    i0.ɵɵelement(13, "i", 48);
-    i0.ɵɵelementStart(14, "span");
-    i0.ɵɵtext(15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 49);
-    i0.ɵɵelement(17, "i", 50);
-    i0.ɵɵelementStart(18, "span");
-    i0.ɵɵtext(19);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 51);
-    i0.ɵɵelement(21, "div", 52)(22, "div", 53)(23, "div", 54);
+} if (rf & 2) {
+    const t_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.FormatBucketDate(t_r4.timestamp));
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r2.PassRate(t_r4), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.PassRateClass(t_r4));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(7, 6, ctx_r2.PassRate(t_r4), "1.0-0"), "%");
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
+    i0.ɵɵelementStart(1, "span", 40);
+    i0.ɵɵtext(2, "Improving");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 55)(25, "span", 56);
-    i0.ɵɵtext(26);
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 41);
+    i0.ɵɵelementStart(1, "span", 42);
+    i0.ɵɵtext(2, "Declining");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 57);
-    i0.ɵɵtext(28);
-    i0.ɵɵelementEnd()()();
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 43);
+    i0.ɵɵelementStart(1, "span", 44);
+    i0.ɵɵtext(2, "Stable");
+    i0.ɵɵelementEnd();
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_0_Template, 3, 0)(1, TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_1_Template, 3, 0)(2, TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Conditional_2_Template, 3, 0);
 } if (rf & 2) {
-    const trend_r2 = ctx.$implicit;
+    const dir_r5 = ctx;
+    i0.ɵɵconditional(dir_r5 === "up" ? 0 : dir_r5 === "down" ? 1 : 2);
+} }
+function TestingAnalyticsComponent_Conditional_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_21_Conditional_1_For_2_Template, 8, 9, "div", 33, i0.ɵɵcomponentInstance().trackTrend, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 34);
+    i0.ɵɵtemplate(4, TestingAnalyticsComponent_Conditional_21_Conditional_1_Conditional_4_Template, 3, 1);
+    i0.ɵɵpipe(5, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_4_0;
+    const trends_r6 = i0.ɵɵnextContext();
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(trends_r6);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(4, 19, trend_r2.timestamp, "short"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", trend_r2.totalRuns, " runs");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(trend_r2.passed);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(trend_r2.failed);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(trend_r2.skipped);
+    i0.ɵɵconditional((tmp_4_0 = i0.ɵɵpipeBind1(5, 1, ctx_r2.PassRateTrendDirection$)) ? 4 : -1, tmp_4_0);
+} }
+function TestingAnalyticsComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_21_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_21_Conditional_1_Template, 6, 3);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No volume data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_27_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "span", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 49);
+    i0.ɵɵelement(4, "div", 50)(5, "div", 51)(6, "div", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 38);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const t_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.FormatBucketDate(t_r7.timestamp));
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("width", ctx_r2.calculatePassRate(trend_r2), "%");
+    i0.ɵɵstyleProp("width", ctx_r2.SegmentPct(t_r7, "passed"), "%");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r2.calculateFailRate(trend_r2), "%");
+    i0.ɵɵstyleProp("width", ctx_r2.SegmentPct(t_r7, "failed"), "%");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r2.calculateSkipRate(trend_r2), "%");
+    i0.ɵɵstyleProp("width", ctx_r2.SegmentPct(t_r7, "skipped"), "%");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("good", ctx_r2.calculatePassRate(trend_r2) >= 80)("warning", ctx_r2.calculatePassRate(trend_r2) >= 60 && ctx_r2.calculatePassRate(trend_r2) < 80)("poor", ctx_r2.calculatePassRate(trend_r2) < 60);
+    i0.ɵɵtextInterpolate(t_r7.totalRuns);
+} }
+function TestingAnalyticsComponent_Conditional_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_27_Conditional_1_For_2_Template, 9, 8, "div", 33, i0.ɵɵcomponentInstance().trackTrend, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 45);
+    i0.ɵɵelement(4, "span", 46);
+    i0.ɵɵtext(5, " Passed ");
+    i0.ɵɵelement(6, "span", 47);
+    i0.ɵɵtext(7, " Failed ");
+    i0.ɵɵelement(8, "span", 48);
+    i0.ɵɵtext(9, " Skipped ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const trends_r8 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.calculatePassRate(trend_r2).toFixed(1), "% pass rate ");
+    i0.ɵɵrepeater(trends_r8);
+} }
+function TestingAnalyticsComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_27_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_27_Conditional_1_Template, 10, 0);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_33_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 53);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No score data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_33_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "span", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36);
+    i0.ɵɵelement(4, "div", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 38);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const t_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.FormatBucketDate(t_r9.timestamp));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("$", trend_r2.totalCost.toFixed(2), "");
+    i0.ɵɵclassMap(ctx_r2.ScoreBarClass(t_r9.averageScore));
+    i0.ɵɵstyleProp("width", t_r9.averageScore * 100, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.ScoreTextClass(t_r9.averageScore));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(7, 8, t_r9.averageScore * 100, "1.0-0"), "%");
 } }
-function TestingAnalyticsComponent_For_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
-    i0.ɵɵtext(3);
+function TestingAnalyticsComponent_Conditional_33_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_33_Conditional_1_For_2_Template, 8, 11, "div", 33, i0.ɵɵcomponentInstance().trackTrend, true);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 60);
-    i0.ɵɵtext(5);
+} if (rf & 2) {
+    const trends_r10 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(trends_r10);
+} }
+function TestingAnalyticsComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_33_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_33_Conditional_1_Template, 3, 0, "div", 32);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_39_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No cost data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_39_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33)(1, "span", 35);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36);
+    i0.ɵɵelement(4, "div", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 38);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 61)(7, "div", 62);
-    i0.ɵɵelement(8, "div", 63);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const test_r4 = ctx.$implicit;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(test_r4.testName);
+    const t_r11 = ctx.$implicit;
+    const trends_r12 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", test_r4.failureCount, " failures \u2022 ", test_r4.failureRate.toFixed(1), "% fail rate");
-    i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("width", test_r4.failureRate, "%");
+    i0.ɵɵtextInterpolate(ctx_r2.FormatBucketDate(t_r11.timestamp));
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r2.CostBarPct(t_r11, trends_r12), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(7, 4, t_r11.totalCost, "1.2-2"), "");
 } }
-function TestingAnalyticsComponent_ForEmpty_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 46);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No failing tests!");
+function TestingAnalyticsComponent_Conditional_39_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_39_Conditional_1_For_2_Template, 8, 7, "div", 33, i0.ɵɵcomponentInstance().trackTrend, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const trends_r12 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(trends_r12);
+} }
+function TestingAnalyticsComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_39_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_39_Conditional_1_Template, 3, 0, "div", 32);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_49_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No failing tests");
     i0.ɵɵelementEnd()();
 } }
-function TestingAnalyticsComponent_For_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
-    i0.ɵɵtext(3);
+function TestingAnalyticsComponent_Conditional_49_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 60);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(3, "span", 61);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 62);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 61)(7, "div", 64);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const test_r5 = ctx.$implicit;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(test_r5.testName);
+    const t_r13 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", t_r13.testName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r13.testName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("avg $", test_r5.avgCost.toFixed(4), "");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("$", test_r5.totalCost.toFixed(2), "");
+    i0.ɵɵtextInterpolate(t_r13.failureCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(7, 4, t_r13.failureRate, "1.0-1"), "%");
 } }
-function TestingAnalyticsComponent_ForEmpty_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 21);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No test data");
+function TestingAnalyticsComponent_Conditional_49_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_49_Conditional_1_For_2_Template, 8, 7, "div", 59, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tests_r14 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(tests_r14);
+} }
+function TestingAnalyticsComponent_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_49_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_49_Conditional_1_Template, 3, 0, "div", 57);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_55_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No duration data");
     i0.ɵɵelementEnd()();
 } }
-function TestingAnalyticsComponent_For_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 58)(2, "div", 59);
-    i0.ɵɵtext(3);
+function TestingAnalyticsComponent_Conditional_55_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 60);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(3, "span", 64);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 62);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 61)(7, "div", 65);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const test_r6 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(test_r6.testName);
+    const t_r15 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", t_r15.testName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r15.testName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.FormatDuration(t_r15.avgDuration));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("max ", ctx_r2.FormatDuration(t_r15.maxDuration), "");
+} }
+function TestingAnalyticsComponent_Conditional_55_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_55_Conditional_1_For_2_Template, 7, 4, "div", 59, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tests_r16 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(tests_r16);
+} }
+function TestingAnalyticsComponent_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_55_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_55_Conditional_1_Template, 3, 0, "div", 57);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_61_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No cost data");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_61_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 64);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 62);
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const t_r17 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", t_r17.testName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r17.testName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("avg ", ctx_r2.formatDuration(test_r6.avgDuration), "");
+    i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(5, 4, t_r17.totalCost, "1.2-2"), "");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(test_r6.maxDuration));
+    i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(8, 7, t_r17.avgCost, "1.4-4"), "/run");
+} }
+function TestingAnalyticsComponent_Conditional_61_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_61_Conditional_1_For_2_Template, 9, 10, "div", 59, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tests_r18 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(tests_r18);
 } }
-function TestingAnalyticsComponent_ForEmpty_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "i", 22);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No test data");
+function TestingAnalyticsComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_61_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_61_Conditional_1_Template, 3, 0, "div", 57);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_67_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No score data available");
     i0.ɵɵelementEnd()();
 } }
-function TestingAnalyticsComponent_For_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 66);
+function TestingAnalyticsComponent_Conditional_67_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "span", 68);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 67);
-    i0.ɵɵelement(4, "div", 68);
-    i0.ɵɵelementStart(5, "span", 69);
+    i0.ɵɵelementStart(3, "div", 69);
+    i0.ɵɵelement(4, "div", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 71);
     i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 72);
     i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "number");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const bucket_r7 = ctx.$implicit;
+    const b_r19 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(b_r19.label);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(bucket_r7.label);
+    i0.ɵɵstyleProp("width", b_r19.percentage, "%")("background", b_r19.color);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(bucket_r7.class);
-    i0.ɵɵstyleProp("width", bucket_r7.percentage, "%");
+    i0.ɵɵtextInterpolate(b_r19.count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(9, 7, b_r19.percentage, "1.0-1"), "%");
+} }
+function TestingAnalyticsComponent_Conditional_67_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵrepeaterCreate(1, TestingAnalyticsComponent_Conditional_67_Conditional_1_For_2_Template, 10, 10, "div", 67, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const buckets_r20 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(buckets_r20);
+} }
+function TestingAnalyticsComponent_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, TestingAnalyticsComponent_Conditional_67_Conditional_0_Template, 4, 0, "div", 28)(1, TestingAnalyticsComponent_Conditional_67_Conditional_1_Template, 3, 0, "div", 65);
+} if (rf & 2) {
+    i0.ɵɵconditional(ctx.length === 0 ? 0 : 1);
+} }
+function TestingAnalyticsComponent_Conditional_75_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading versions...");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No version data available");
+    i0.ɵɵelementEnd()();
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 81);
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 82);
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 80);
+    i0.ɵɵtemplate(1, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Conditional_1_Template, 1, 0, "i", 81)(2, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Conditional_2_Template, 1, 0, "i", 82);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r21 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("delta-up", row_r21.passRateDelta > 0)("delta-down", row_r21.passRateDelta < 0)("delta-neutral", row_r21.passRateDelta === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r21.passRateDelta > 0 ? 1 : row_r21.passRateDelta < 0 ? 2 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(bucket_r7.count);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 8, ctx_r2.AbsNum(row_r21.passRateDelta), "1.1-1"), "% ");
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 81);
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 82);
+} }
+function TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 80);
+    i0.ɵɵtemplate(1, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Conditional_1_Template, 1, 0, "i", 81)(2, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Conditional_2_Template, 1, 0, "i", 82);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r21 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("delta-up", row_r21.costDelta < 0)("delta-down", row_r21.costDelta > 0)("delta-neutral", row_r21.costDelta === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r21.costDelta > 0 ? 1 : row_r21.costDelta < 0 ? 2 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", bucket_r7.percentage.toFixed(1), "%");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 8, ctx_r2.AbsNum(row_r21.costDelta), "1.1-1"), "% ");
 } }
+function TestingAnalyticsComponent_Conditional_77_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "span", 77);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 78);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "td");
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td", 76);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "td", 76)(12, "span");
+    i0.ɵɵtext(13);
+    i0.ɵɵpipe(14, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(15, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_15_Template, 5, 11, "span", 79);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "td", 76)(17, "span");
+    i0.ɵɵtext(18);
+    i0.ɵɵpipe(19, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(20, TestingAnalyticsComponent_Conditional_77_For_16_Conditional_20_Template, 5, 11, "span", 79);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r21 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r21.gitCommitShort);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r21.agentVersion);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 8, row_r21.date, "mediumDate"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r21.totalTests);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(14, 11, row_r21.passRate, "1.1-1"), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(row_r21.passRateDelta !== null ? 15 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(19, 14, row_r21.totalCost, "1.2-2"), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(row_r21.costDelta !== null ? 20 : -1);
+} }
+function TestingAnalyticsComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "table", 75)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th", 76);
+    i0.ɵɵtext(9, "Tests");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 76);
+    i0.ɵɵtext(11, "Pass Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th", 76);
+    i0.ɵɵtext(13, "Cost");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "tbody");
+    i0.ɵɵrepeaterCreate(15, TestingAnalyticsComponent_Conditional_77_For_16_Template, 21, 17, "tr", null, _forTrack3);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(15);
+    i0.ɵɵrepeater(ctx_r2.VersionRows);
+} }
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
 export class TestingAnalyticsComponent {
     instrumentationService;
     cdr;
-    initialState;
+    // ------- Inputs / Outputs -------
+    initialState = null;
     stateChange = new EventEmitter();
-    destroy$ = new Subject();
-    selectedTimeRange = 30;
-    timeRanges = [
+    // ------- Public state -------
+    TimeRanges = [
         { label: '7 Days', days: 7 },
         { label: '30 Days', days: 30 },
         { label: '90 Days', days: 90 }
     ];
-    trends$;
-    topFailingTests$;
-    expensiveTests$;
-    slowestTests$;
-    scoreDistribution$;
-    totalCost$;
-    avgCostPerTest$;
-    avgCostPerRun$;
-    projectedMonthlyCost$;
-    avgExecutionTime$;
-    throughput$;
-    reliabilityScore$;
+    SelectedDays = 30;
+    VersionRows = [];
+    IsLoadingVersions = false;
+    // ------- Observables -------
+    DisplayTrends$;
+    PassRateTrendDirection$;
+    TopFailingTests$;
+    SlowestTests$;
+    MostExpensiveTests$;
+    ScoreDistribution$;
+    // ------- Private -------
+    destroy$ = new Subject();
+    maxTrendRuns = 0; // cached for cost bar scaling
     constructor(instrumentationService, cdr) {
         this.instrumentationService = instrumentationService;
         this.cdr = cdr;
     }
+    // ===================================================================
+    // Lifecycle
+    // ===================================================================
     ngOnInit() {
+        this.restoreState();
         this.setupObservables();
-        if (this.initialState?.selectedTimeRange) {
-            this.selectedTimeRange = this.initialState.selectedTimeRange;
-        }
+        this.loadVersionMetrics();
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    setupObservables() {
-        this.trends$ = this.instrumentationService.trends$;
-        const analytics$ = this.instrumentationService.analytics$;
-        this.topFailingTests$ = analytics$.pipe(map(analytics => analytics.topFailingTests), takeUntil(this.destroy$));
-        this.expensiveTests$ = analytics$.pipe(map(analytics => analytics.mostExpensiveTests), takeUntil(this.destroy$));
-        this.slowestTests$ = analytics$.pipe(map(analytics => analytics.slowestTests), takeUntil(this.destroy$));
-        this.scoreDistribution$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            const buckets = [
-                { label: 'Excellent (≥0.9)', min: 0.9, max: 1.0, class: 'excellent', count: 0 },
-                { label: 'Good (0.8-0.9)', min: 0.8, max: 0.9, class: 'good', count: 0 },
-                { label: 'Fair (0.6-0.8)', min: 0.6, max: 0.8, class: 'fair', count: 0 },
-                { label: 'Poor (0.4-0.6)', min: 0.4, max: 0.6, class: 'poor', count: 0 },
-                { label: 'Fail (<0.4)', min: 0, max: 0.4, class: 'fail', count: 0 }
-            ];
-            runs.forEach(run => {
-                const bucket = buckets.find(b => run.score >= b.min && run.score < b.max);
-                if (bucket)
-                    bucket.count++;
-            });
-            const total = runs.length || 1;
-            return buckets.map(b => ({
-                ...b,
-                percentage: (b.count / total) * 100
-            }));
-        }), takeUntil(this.destroy$));
-        this.totalCost$ = this.instrumentationService.testRuns$.pipe(map(runs => runs.reduce((sum, r) => sum + r.cost, 0)));
-        this.avgCostPerTest$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            if (runs.length === 0)
-                return 0;
-            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
-            const uniqueTests = new Set(runs.map(r => r.testName)).size;
-            return uniqueTests > 0 ? totalCost / uniqueTests : 0;
-        }));
-        this.avgCostPerRun$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            if (runs.length === 0)
-                return 0;
-            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
-            return totalCost / runs.length;
-        }));
-        this.projectedMonthlyCost$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            if (runs.length === 0)
-                return 0;
-            const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
-            const daysInPeriod = this.selectedTimeRange;
-            return (totalCost / daysInPeriod) * 30;
-        }));
-        this.avgExecutionTime$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            if (runs.length === 0)
-                return 0;
-            const totalDuration = runs.reduce((sum, r) => sum + r.duration, 0);
-            return totalDuration / runs.length;
-        }));
-        this.throughput$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            const daysInPeriod = this.selectedTimeRange;
-            return runs.length / daysInPeriod;
-        }));
-        this.reliabilityScore$ = this.instrumentationService.testRuns$.pipe(map(runs => {
-            if (runs.length === 0)
-                return 0;
-            const passed = runs.filter(r => r.status === 'Passed').length;
-            return (passed / runs.length) * 100;
-        }));
-    }
-    onTimeRangeChange() {
-        const days = this.selectedTimeRange;
+    // ===================================================================
+    // Public methods (template-bound)
+    // ===================================================================
+    OnTimeRangeSelect(days) {
+        this.SelectedDays = days;
         const end = new Date();
         const start = new Date(end.getTime() - days * 24 * 60 * 60 * 1000);
         this.instrumentationService.setDateRange(start, end);
-        this.emitStateChange();
+        this.loadVersionMetrics();
+        this.emitState();
     }
-    refresh() {
+    Refresh() {
         this.instrumentationService.refresh();
+        this.loadVersionMetrics();
     }
-    formatDuration(milliseconds) {
-        if (milliseconds < 1000)
-            return `${milliseconds}ms`;
-        const seconds = Math.floor(milliseconds / 1000);
-        const minutes = Math.floor(seconds / 60);
-        if (minutes > 0)
-            return `${minutes}m ${seconds % 60}s`;
-        return `${seconds}s`;
+    // -- Trend helpers (called from template) --
+    PassRate(t) {
+        return t.totalRuns === 0 ? 0 : (t.passed / t.totalRuns) * 100;
     }
-    calculatePassRate(trend) {
-        if (trend.totalRuns === 0)
-            return 0;
-        return (trend.passed / trend.totalRuns) * 100;
+    PassRateClass(t) {
+        const rate = this.PassRate(t);
+        if (rate >= 80)
+            return 'text-pass-good';
+        if (rate >= 60)
+            return 'text-pass-warn';
+        return 'text-pass-bad';
     }
-    calculateFailRate(trend) {
-        if (trend.totalRuns === 0)
+    SegmentPct(t, segment) {
+        if (t.totalRuns === 0)
             return 0;
-        return (trend.failed / trend.totalRuns) * 100;
+        const value = segment === 'passed' ? t.passed : segment === 'failed' ? t.failed : t.skipped;
+        return (value / t.totalRuns) * 100;
+    }
+    ScoreBarClass(score) {
+        if (score >= 0.9)
+            return 'bar-fill score-excellent';
+        if (score >= 0.7)
+            return 'bar-fill score-good';
+        if (score >= 0.5)
+            return 'bar-fill score-fair';
+        return 'bar-fill score-poor';
+    }
+    ScoreTextClass(score) {
+        if (score >= 0.9)
+            return 'text-excellent';
+        if (score >= 0.7)
+            return 'text-good';
+        if (score >= 0.5)
+            return 'text-fair';
+        return 'text-poor';
+    }
+    CostBarPct(t, all) {
+        const maxCost = Math.max(...all.map(x => x.totalCost), 0.01);
+        return (t.totalCost / maxCost) * 100;
+    }
+    FormatBucketDate(d) {
+        const dt = d instanceof Date ? d : new Date(d);
+        return `${dt.getMonth() + 1}/${dt.getDate()}`;
+    }
+    FormatDuration(ms) {
+        if (ms < 1000)
+            return `${Math.round(ms)}ms`;
+        const s = Math.floor(ms / 1000);
+        const m = Math.floor(s / 60);
+        if (m > 0)
+            return `${m}m ${s % 60}s`;
+        return `${s}s`;
+    }
+    AbsNum(n) {
+        return Math.abs(n);
+    }
+    /** trackBy for trend @for loops */
+    trackTrend(index, t) {
+        return index;
+    }
+    // ===================================================================
+    // Private helpers
+    // ===================================================================
+    restoreState() {
+        if (this.initialState != null) {
+            if (typeof this.initialState['selectedDays'] === 'number') {
+                this.SelectedDays = this.initialState['selectedDays'];
+            }
+        }
+        // Apply initial date range
+        const end = new Date();
+        const start = new Date(end.getTime() - this.SelectedDays * 24 * 60 * 60 * 1000);
+        this.instrumentationService.setDateRange(start, end);
     }
-    calculateSkipRate(trend) {
-        if (trend.totalRuns === 0)
+    setupObservables() {
+        // Limit trends to last 10 buckets for readability
+        this.DisplayTrends$ = this.instrumentationService.trends$.pipe(map(trends => trends.slice(-10)), shareReplay(1));
+        this.PassRateTrendDirection$ = this.DisplayTrends$.pipe(map(trends => this.calculateTrendDirection(trends)), shareReplay(1));
+        const analytics$ = this.instrumentationService.analytics$;
+        this.TopFailingTests$ = analytics$.pipe(map(a => a.topFailingTests.slice(0, 5)), shareReplay(1));
+        this.SlowestTests$ = analytics$.pipe(map(a => a.slowestTests.slice(0, 5)), shareReplay(1));
+        this.MostExpensiveTests$ = analytics$.pipe(map(a => a.mostExpensiveTests.slice(0, 5)), shareReplay(1));
+        this.ScoreDistribution$ = this.instrumentationService.testRuns$.pipe(map(runs => this.buildScoreDistribution(runs)), shareReplay(1));
+    }
+    calculateTrendDirection(trends) {
+        if (trends.length < 2)
+            return 'stable';
+        const recentHalf = trends.slice(Math.floor(trends.length / 2));
+        const olderHalf = trends.slice(0, Math.floor(trends.length / 2));
+        const avgRecent = this.averagePassRate(recentHalf);
+        const avgOlder = this.averagePassRate(olderHalf);
+        const diff = avgRecent - avgOlder;
+        if (diff > 2)
+            return 'up';
+        if (diff < -2)
+            return 'down';
+        return 'stable';
+    }
+    averagePassRate(trends) {
+        const withRuns = trends.filter(t => t.totalRuns > 0);
+        if (withRuns.length === 0)
             return 0;
-        return (trend.skipped / trend.totalRuns) * 100;
+        return withRuns.reduce((s, t) => s + (t.passed / t.totalRuns) * 100, 0) / withRuns.length;
+    }
+    buildScoreDistribution(runs) {
+        const defs = [
+            { label: 'Excellent (>=0.9)', color: '#43a047', min: 0.9, max: 1.01 },
+            { label: 'Good (0.7-0.89)', color: '#1e88e5', min: 0.7, max: 0.9 },
+            { label: 'Fair (0.5-0.69)', color: '#f57c00', min: 0.5, max: 0.7 },
+            { label: 'Poor (0.3-0.49)', color: '#e64a19', min: 0.3, max: 0.5 },
+            { label: 'Fail (<0.3)', color: '#e53935', min: 0, max: 0.3 }
+        ];
+        const total = runs.length || 1;
+        return defs.map(d => {
+            const count = runs.filter(r => r.score >= d.min && r.score < d.max).length;
+            return {
+                label: d.label,
+                color: d.color,
+                count,
+                percentage: (count / total) * 100
+            };
+        });
     }
-    emitStateChange() {
+    async loadVersionMetrics() {
+        this.IsLoadingVersions = true;
+        this.cdr.markForCheck();
+        try {
+            const metrics = await this.instrumentationService.getVersionMetrics();
+            this.VersionRows = this.buildVersionRows(metrics);
+        }
+        catch {
+            this.VersionRows = [];
+        }
+        finally {
+            this.IsLoadingVersions = false;
+            this.cdr.markForCheck();
+        }
+    }
+    buildVersionRows(metrics) {
+        // metrics are already sorted newest-first by the service
+        return metrics.map((m, i) => {
+            const prev = i < metrics.length - 1 ? metrics[i + 1] : null;
+            let passRateDelta = null;
+            let costDelta = null;
+            if (prev) {
+                passRateDelta = m.passRate - prev.passRate;
+                costDelta = prev.totalCost !== 0
+                    ? ((m.totalCost - prev.totalCost) / prev.totalCost) * 100
+                    : null;
+            }
+            return {
+                version: m.version,
+                gitCommitShort: m.gitCommit.length > 7 ? m.gitCommit.substring(0, 7) : m.gitCommit,
+                agentVersion: m.agentVersion,
+                date: m.runDate,
+                totalTests: m.totalTests,
+                passRate: m.passRate,
+                totalCost: m.totalCost,
+                passRateDelta,
+                costDelta
+            };
+        });
+    }
+    emitState() {
         this.stateChange.emit({
-            selectedTimeRange: this.selectedTimeRange
+            selectedDays: this.SelectedDays
         });
     }
     static ɵfac = function TestingAnalyticsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingAnalyticsComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingAnalyticsComponent, selectors: [["app-testing-analytics"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 134, vars: 57, consts: [[1, "testing-analytics"], [1, "analytics-header"], [1, "header-left"], [1, "fa-solid", "fa-chart-bar"], [1, "header-actions"], [1, "time-range-select", 3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "analytics-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-line"], [1, "trends-grid"], [1, "trend-card"], [1, "analytics-grid"], [1, "analytics-card"], [1, "card-header"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "card-content"], [1, "analytics-row"], [1, "empty-state"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-chart-pie"], [1, "score-distribution"], [1, "score-bucket"], [1, "fa-solid", "fa-wallet"], [1, "cost-summary"], [1, "cost-item", "total"], [1, "cost-label"], [1, "cost-amount"], [1, "cost-item"], [1, "fa-solid", "fa-gauge"], [1, "performance-metrics"], [1, "perf-metric"], [1, "perf-icon"], [1, "fa-solid", "fa-bolt"], [1, "perf-content"], [1, "perf-value"], [1, "perf-label"], [1, "fa-solid", "fa-check-double"], [1, "trend-header"], [1, "trend-date"], [1, "trend-total"], [1, "trend-metrics"], [1, "metric", "passed"], [1, "fa-solid", "fa-check-circle"], [1, "metric", "failed"], [1, "fa-solid", "fa-times-circle"], [1, "metric", "skipped"], [1, "fa-solid", "fa-minus-circle"], [1, "trend-chart"], [1, "chart-bar", "passed"], [1, "chart-bar", "failed"], [1, "chart-bar", "skipped"], [1, "trend-footer"], [1, "pass-rate"], [1, "cost"], [1, "row-info"], [1, "row-name"], [1, "row-meta"], [1, "row-metrics"], [1, "fail-bar-container"], [1, "fail-bar"], [1, "cost-value"], [1, "duration-value"], [1, "bucket-label"], [1, "bucket-bar-container"], [1, "bucket-bar"], [1, "bucket-count"], [1, "bucket-percentage"]], template: function TestingAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingAnalyticsComponent, selectors: [["app-testing-analytics"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 78, vars: 25, consts: [[1, "testing-analytics"], [1, "page-header"], [1, "header-left"], [1, "fa-solid", "fa-chart-bar"], [1, "header-actions"], [1, "time-range-pills"], [1, "pill", 3, "active"], [1, "refresh-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "section-title"], [1, "fa-solid", "fa-chart-line"], [1, "trend-grid"], [1, "card", "trend-card"], [1, "fa-solid", "fa-check-double"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-star-half-stroke"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "fa-magnifying-glass-chart"], [1, "insights-grid"], [1, "card", "insight-card"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-coins"], [1, "fa-solid", "fa-chart-pie"], [1, "card", "distribution-card"], [1, "fa-solid", "fa-code-compare"], [1, "section-subtitle"], [1, "card", "version-card"], [1, "empty-mini"], [1, "version-table-wrap"], [1, "pill", 3, "click"], [1, "fa-solid", "fa-chart-area"], [1, "bar-chart"], [1, "bar-row"], [1, "trend-direction"], [1, "bar-label"], [1, "bar-track"], [1, "bar-fill", "pass-rate-bar"], [1, "bar-value"], [1, "fa-solid", "fa-arrow-trend-up", "trend-up"], [1, "trend-up"], [1, "fa-solid", "fa-arrow-trend-down", "trend-down"], [1, "trend-down"], [1, "fa-solid", "fa-minus", "trend-neutral"], [1, "trend-neutral"], [1, "legend-row"], [1, "legend-dot", "passed-seg"], [1, "legend-dot", "failed-seg"], [1, "legend-dot", "skipped-seg"], [1, "bar-track", "stacked"], [1, "bar-segment", "passed-seg"], [1, "bar-segment", "failed-seg"], [1, "bar-segment", "skipped-seg"], [1, "fa-solid", "fa-star"], [1, "bar-fill"], [1, "fa-solid", "fa-wallet"], [1, "bar-fill", "cost-bar"], [1, "insight-list"], [1, "fa-solid", "fa-circle-check"], [1, "insight-row"], [1, "insight-name", 3, "title"], [1, "badge-fail"], [1, "insight-secondary"], [1, "fa-solid", "fa-bolt"], [1, "insight-primary"], [1, "distribution-bars"], [1, "fa-solid", "fa-chart-simple"], [1, "dist-row"], [1, "dist-label"], [1, "dist-track"], [1, "dist-fill"], [1, "dist-count"], [1, "dist-pct"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-code-branch"], [1, "version-table"], [1, "num"], [1, "version-label"], [1, "version-agent"], [1, "delta", 3, "delta-up", "delta-down", "delta-neutral"], [1, "delta"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-arrow-down"]], template: function TestingAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
             i0.ɵɵelement(4, "i", 3);
             i0.ɵɵtext(5, " Testing Analytics ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 4)(7, "select", 5);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingAnalyticsComponent_Template_select_ngModelChange_7_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedTimeRange, $event) || (ctx.selectedTimeRange = $event); return $event; });
-            i0.ɵɵlistener("change", function TestingAnalyticsComponent_Template_select_change_7_listener() { return ctx.onTimeRangeChange(); });
-            i0.ɵɵrepeaterCreate(8, TestingAnalyticsComponent_For_9_Template, 2, 2, "option", 6, _forTrack0);
+            i0.ɵɵelementStart(6, "div", 4)(7, "div", 5);
+            i0.ɵɵrepeaterCreate(8, TestingAnalyticsComponent_For_9_Template, 2, 3, "button", 6, _forTrack0);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "button", 7);
-            i0.ɵɵlistener("click", function TestingAnalyticsComponent_Template_button_click_10_listener() { return ctx.refresh(); });
+            i0.ɵɵlistener("click", function TestingAnalyticsComponent_Template_button_click_10_listener() { return ctx.Refresh(); });
             i0.ɵɵelement(11, "i", 8);
             i0.ɵɵtext(12, " Refresh ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "h3");
-            i0.ɵɵelement(16, "i", 11);
-            i0.ɵɵtext(17, " Test Execution Trends ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(18, "div", 12);
-            i0.ɵɵrepeaterCreate(19, TestingAnalyticsComponent_For_20_Template, 29, 22, "div", 13, i0.ɵɵrepeaterTrackByIndex);
-            i0.ɵɵpipe(21, "async");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 14)(23, "div", 15)(24, "div", 16)(25, "h4");
-            i0.ɵɵelement(26, "i", 17);
-            i0.ɵɵtext(27, " Top Failing Tests ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(28, "div", 18);
-            i0.ɵɵrepeaterCreate(29, TestingAnalyticsComponent_For_30_Template, 9, 5, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_31_Template, 4, 0, "div", 20);
-            i0.ɵɵpipe(32, "async");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(33, "div", 15)(34, "div", 16)(35, "h4");
-            i0.ɵɵelement(36, "i", 21);
-            i0.ɵɵtext(37, " Most Expensive Tests ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(38, "div", 18);
-            i0.ɵɵrepeaterCreate(39, TestingAnalyticsComponent_For_40_Template, 9, 3, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_41_Template, 4, 0, "div", 20);
-            i0.ɵɵpipe(42, "async");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(43, "div", 15)(44, "div", 16)(45, "h4");
-            i0.ɵɵelement(46, "i", 22);
-            i0.ɵɵtext(47, " Slowest Tests ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(48, "div", 18);
-            i0.ɵɵrepeaterCreate(49, TestingAnalyticsComponent_For_50_Template, 9, 3, "div", 19, _forTrack1, false, TestingAnalyticsComponent_ForEmpty_51_Template, 4, 0, "div", 20);
-            i0.ɵɵpipe(52, "async");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(53, "div", 15)(54, "div", 16)(55, "h4");
-            i0.ɵɵelement(56, "i", 23);
-            i0.ɵɵtext(57, " Score Distribution ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(58, "div", 18)(59, "div", 24);
-            i0.ɵɵrepeaterCreate(60, TestingAnalyticsComponent_For_61_Template, 9, 7, "div", 25, _forTrack2);
-            i0.ɵɵpipe(62, "async");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(63, "div", 15)(64, "div", 16)(65, "h4");
-            i0.ɵɵelement(66, "i", 26);
-            i0.ɵɵtext(67, " Cost Breakdown ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(68, "div", 18)(69, "div", 27)(70, "div", 28)(71, "span", 29);
-            i0.ɵɵtext(72, "Total Cost");
+            i0.ɵɵelementStart(13, "div", 9);
+            i0.ɵɵelement(14, "i", 10);
+            i0.ɵɵtext(15, " Trend Overview ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(73, "span", 30);
-            i0.ɵɵtext(74);
-            i0.ɵɵpipe(75, "async");
-            i0.ɵɵpipe(76, "number");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(77, "div", 31)(78, "span", 29);
-            i0.ɵɵtext(79, "Avg per Test");
+            i0.ɵɵelementStart(16, "div", 11)(17, "div", 12)(18, "h4");
+            i0.ɵɵelement(19, "i", 13);
+            i0.ɵɵtext(20, " Pass Rate Trend");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(80, "span", 30);
-            i0.ɵɵtext(81);
-            i0.ɵɵpipe(82, "async");
-            i0.ɵɵpipe(83, "number");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(84, "div", 31)(85, "span", 29);
-            i0.ɵɵtext(86, "Avg per Run");
+            i0.ɵɵtemplate(21, TestingAnalyticsComponent_Conditional_21_Template, 2, 1);
+            i0.ɵɵpipe(22, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(87, "span", 30);
-            i0.ɵɵtext(88);
-            i0.ɵɵpipe(89, "async");
-            i0.ɵɵpipe(90, "number");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(91, "div", 31)(92, "span", 29);
-            i0.ɵɵtext(93, "Projected Monthly");
+            i0.ɵɵelementStart(23, "div", 12)(24, "h4");
+            i0.ɵɵelement(25, "i", 14);
+            i0.ɵɵtext(26, " Run Volume");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(27, TestingAnalyticsComponent_Conditional_27_Template, 2, 1);
+            i0.ɵɵpipe(28, "async");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "div", 12)(30, "h4");
+            i0.ɵɵelement(31, "i", 15);
+            i0.ɵɵtext(32, " Score Trend");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(33, TestingAnalyticsComponent_Conditional_33_Template, 2, 1);
+            i0.ɵɵpipe(34, "async");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "div", 12)(36, "h4");
+            i0.ɵɵelement(37, "i", 16);
+            i0.ɵɵtext(38, " Cost Trend");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(94, "span", 30);
-            i0.ɵɵtext(95);
-            i0.ɵɵpipe(96, "async");
-            i0.ɵɵpipe(97, "number");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(98, "div", 15)(99, "div", 16)(100, "h4");
-            i0.ɵɵelement(101, "i", 32);
-            i0.ɵɵtext(102, " Performance Metrics ");
+            i0.ɵɵtemplate(39, TestingAnalyticsComponent_Conditional_39_Template, 2, 1);
+            i0.ɵɵpipe(40, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(103, "div", 18)(104, "div", 33)(105, "div", 34)(106, "div", 35);
-            i0.ɵɵelement(107, "i", 36);
+            i0.ɵɵelementStart(41, "div", 9);
+            i0.ɵɵelement(42, "i", 17);
+            i0.ɵɵtext(43, " Insights ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(108, "div", 37)(109, "div", 38);
-            i0.ɵɵtext(110);
-            i0.ɵɵpipe(111, "async");
+            i0.ɵɵelementStart(44, "div", 18)(45, "div", 19)(46, "h4");
+            i0.ɵɵelement(47, "i", 20);
+            i0.ɵɵtext(48, " Top Failing Tests");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(112, "div", 39);
-            i0.ɵɵtext(113, "Avg Execution Time");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(114, "div", 34)(115, "div", 35);
-            i0.ɵɵelement(116, "i", 11);
+            i0.ɵɵtemplate(49, TestingAnalyticsComponent_Conditional_49_Template, 2, 1);
+            i0.ɵɵpipe(50, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(117, "div", 37)(118, "div", 38);
-            i0.ɵɵtext(119);
-            i0.ɵɵpipe(120, "async");
-            i0.ɵɵpipe(121, "number");
+            i0.ɵɵelementStart(51, "div", 19)(52, "h4");
+            i0.ɵɵelement(53, "i", 21);
+            i0.ɵɵtext(54, " Slowest Tests");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(122, "div", 39);
-            i0.ɵɵtext(123, "Tests per Day");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(124, "div", 34)(125, "div", 35);
-            i0.ɵɵelement(126, "i", 40);
+            i0.ɵɵtemplate(55, TestingAnalyticsComponent_Conditional_55_Template, 2, 1);
+            i0.ɵɵpipe(56, "async");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "div", 19)(58, "h4");
+            i0.ɵɵelement(59, "i", 22);
+            i0.ɵɵtext(60, " Most Expensive Tests");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(61, TestingAnalyticsComponent_Conditional_61_Template, 2, 1);
+            i0.ɵɵpipe(62, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(63, "div", 9);
+            i0.ɵɵelement(64, "i", 23);
+            i0.ɵɵtext(65, " Score Distribution ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(127, "div", 37)(128, "div", 38);
-            i0.ɵɵtext(129);
-            i0.ɵɵpipe(130, "async");
-            i0.ɵɵpipe(131, "number");
+            i0.ɵɵelementStart(66, "div", 24);
+            i0.ɵɵtemplate(67, TestingAnalyticsComponent_Conditional_67_Template, 2, 1);
+            i0.ɵɵpipe(68, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(132, "div", 39);
-            i0.ɵɵtext(133, "Reliability Score");
-            i0.ɵɵelementEnd()()()()()()()();
+            i0.ɵɵelementStart(69, "div", 9);
+            i0.ɵɵelement(70, "i", 25);
+            i0.ɵɵtext(71, " Version Comparison ");
+            i0.ɵɵelementStart(72, "span", 26);
+            i0.ɵɵtext(73, "Compare metrics across different builds");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(74, "div", 27);
+            i0.ɵɵtemplate(75, TestingAnalyticsComponent_Conditional_75_Template, 4, 0, "div", 28)(76, TestingAnalyticsComponent_Conditional_76_Template, 4, 0, "div", 28)(77, TestingAnalyticsComponent_Conditional_77_Template, 17, 0, "div", 29);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            let tmp_1_0;
             let tmp_2_0;
             let tmp_3_0;
             let tmp_4_0;
             let tmp_5_0;
-            i0.ɵɵadvance(7);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedTimeRange);
-            i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.timeRanges);
-            i0.ɵɵadvance(11);
-            i0.ɵɵrepeater((tmp_2_0 = i0.ɵɵpipeBind1(21, 11, ctx.trends$)) !== null && tmp_2_0 !== undefined ? tmp_2_0 : i0.ɵɵpureFunction0(53, _c0));
-            i0.ɵɵadvance(10);
-            i0.ɵɵrepeater((tmp_3_0 = i0.ɵɵpipeBind1(32, 13, ctx.topFailingTests$)) !== null && tmp_3_0 !== undefined ? tmp_3_0 : i0.ɵɵpureFunction0(54, _c0));
-            i0.ɵɵadvance(10);
-            i0.ɵɵrepeater((tmp_4_0 = i0.ɵɵpipeBind1(42, 15, ctx.expensiveTests$)) !== null && tmp_4_0 !== undefined ? tmp_4_0 : i0.ɵɵpureFunction0(55, _c0));
+            let tmp_6_0;
+            let tmp_7_0;
+            let tmp_8_0;
+            i0.ɵɵadvance(8);
+            i0.ɵɵrepeater(ctx.TimeRanges);
+            i0.ɵɵadvance(13);
+            i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(22, 9, ctx.DisplayTrends$)) ? 21 : -1, tmp_1_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_2_0 = i0.ɵɵpipeBind1(28, 11, ctx.DisplayTrends$)) ? 27 : -1, tmp_2_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_3_0 = i0.ɵɵpipeBind1(34, 13, ctx.DisplayTrends$)) ? 33 : -1, tmp_3_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_4_0 = i0.ɵɵpipeBind1(40, 15, ctx.DisplayTrends$)) ? 39 : -1, tmp_4_0);
             i0.ɵɵadvance(10);
-            i0.ɵɵrepeater((tmp_5_0 = i0.ɵɵpipeBind1(52, 17, ctx.slowestTests$)) !== null && tmp_5_0 !== undefined ? tmp_5_0 : i0.ɵɵpureFunction0(56, _c0));
-            i0.ɵɵadvance(11);
-            i0.ɵɵrepeater(i0.ɵɵpipeBind1(62, 19, ctx.scoreDistribution$));
-            i0.ɵɵadvance(14);
-            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(76, 23, i0.ɵɵpipeBind1(75, 21, ctx.totalCost$) || 0, "1.2-2"), "");
-            i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(83, 28, i0.ɵɵpipeBind1(82, 26, ctx.avgCostPerTest$) || 0, "1.4-4"), "");
-            i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(90, 33, i0.ɵɵpipeBind1(89, 31, ctx.avgCostPerRun$) || 0, "1.4-4"), "");
-            i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(97, 38, i0.ɵɵpipeBind1(96, 36, ctx.projectedMonthlyCost$) || 0, "1.2-2"), "");
-            i0.ɵɵadvance(15);
-            i0.ɵɵtextInterpolate(ctx.formatDuration(i0.ɵɵpipeBind1(111, 41, ctx.avgExecutionTime$) || 0));
-            i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(121, 45, i0.ɵɵpipeBind1(120, 43, ctx.throughput$) || 0, "1.1-1"));
-            i0.ɵɵadvance(10);
-            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(131, 50, i0.ɵɵpipeBind1(130, 48, ctx.reliabilityScore$) || 0, "1.1-1"), "%");
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.AsyncPipe, i3.DecimalPipe, i3.DatePipe], styles: [".testing-analytics[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analytics-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-range-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      background: white;\n      cursor: pointer;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn[_ngcontent-%COMP%]:hover {\n      background: #f5f5f5;\n    }\n\n    .analytics-section[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .section-header[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .trends-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .trend-card[_ngcontent-%COMP%] {\n      background: #f8f9fa;\n      padding: 16px;\n      border-radius: 6px;\n      border: 1px solid #e0e0e0;\n    }\n\n    .trend-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .trend-date[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n    }\n\n    .trend-total[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .trend-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n\n    .metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      font-weight: 600;\n    }\n\n    .metric.passed[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .metric.failed[_ngcontent-%COMP%] {\n      color: #f44336;\n    }\n\n    .metric.skipped[_ngcontent-%COMP%] {\n      color: #9e9e9e;\n    }\n\n    .trend-chart[_ngcontent-%COMP%] {\n      display: flex;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 12px;\n      background: #e0e0e0;\n    }\n\n    .chart-bar[_ngcontent-%COMP%] {\n      transition: width 0.3s ease;\n    }\n\n    .chart-bar.passed[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .chart-bar.failed[_ngcontent-%COMP%] {\n      background: #f44336;\n    }\n\n    .chart-bar.skipped[_ngcontent-%COMP%] {\n      background: #9e9e9e;\n    }\n\n    .trend-footer[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 11px;\n    }\n\n    .pass-rate[_ngcontent-%COMP%] {\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 12px;\n    }\n\n    .pass-rate.good[_ngcontent-%COMP%] {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .pass-rate.warning[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .pass-rate.poor[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .cost[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 600;\n    }\n\n    .analytics-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n      gap: 20px;\n    }\n\n    .analytics-card[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .card-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .analytics-row[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .analytics-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .analytics-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .row-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .row-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .row-meta[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .row-metrics[_ngcontent-%COMP%] {\n      min-width: 120px;\n      text-align: right;\n    }\n\n    .fail-bar-container[_ngcontent-%COMP%] {\n      width: 100px;\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .fail-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: #f44336;\n      transition: width 0.3s ease;\n    }\n\n    .cost-value[_ngcontent-%COMP%], \n   .duration-value[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      text-align: center;\n      padding: 40px 20px;\n      color: #999;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 36px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 13px;\n      margin: 0;\n    }\n\n    .score-distribution[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .score-bucket[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 60px;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .bucket-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .bucket-bar-container[_ngcontent-%COMP%] {\n      position: relative;\n      height: 24px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .bucket-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.3s ease;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n    }\n\n    .bucket-bar.excellent[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .bucket-bar.good[_ngcontent-%COMP%] {\n      background: #8bc34a;\n    }\n\n    .bucket-bar.fair[_ngcontent-%COMP%] {\n      background: #ff9800;\n    }\n\n    .bucket-bar.poor[_ngcontent-%COMP%] {\n      background: #ff5722;\n    }\n\n    .bucket-bar.fail[_ngcontent-%COMP%] {\n      background: #f44336;\n    }\n\n    .bucket-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .bucket-percentage[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-align: right;\n    }\n\n    .cost-summary[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .cost-item[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%] {\n      background: #e3f2fd;\n      border: 2px solid #2196f3;\n    }\n\n    .cost-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%]   .cost-label[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-amount[_ngcontent-%COMP%] {\n      font-size: 16px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .cost-item.total[_ngcontent-%COMP%]   .cost-amount[_ngcontent-%COMP%] {\n      color: #2196f3;\n      font-size: 20px;\n    }\n\n    .performance-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .perf-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .perf-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      background: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .perf-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .perf-value[_ngcontent-%COMP%] {\n      font-size: 20px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .perf-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    @media (max-width: 1200px) {\n      .analytics-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional((tmp_5_0 = i0.ɵɵpipeBind1(50, 17, ctx.TopFailingTests$)) ? 49 : -1, tmp_5_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_6_0 = i0.ɵɵpipeBind1(56, 19, ctx.SlowestTests$)) ? 55 : -1, tmp_6_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_7_0 = i0.ɵɵpipeBind1(62, 21, ctx.MostExpensiveTests$)) ? 61 : -1, tmp_7_0);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional((tmp_8_0 = i0.ɵɵpipeBind1(68, 23, ctx.ScoreDistribution$)) ? 67 : -1, tmp_8_0);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.IsLoadingVersions ? 75 : ctx.VersionRows.length === 0 ? 76 : 77);
+        } }, dependencies: [i2.AsyncPipe, i2.DecimalPipe, i2.DatePipe], styles: ["\n\n    \n\n    \n\n    .testing-analytics[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    \n\n    \n\n    \n\n    .page-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 12px;\n      background: #fff;\n      padding: 20px 24px;\n      border-radius: 12px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n      margin-bottom: 24px;\n    }\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #2196f3; }\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    \n\n    .time-range-pills[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n      background: #f0f0f0;\n      border-radius: 8px;\n      padding: 3px;\n    }\n    .pill[_ngcontent-%COMP%] {\n      padding: 6px 14px;\n      border: none;\n      border-radius: 6px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      background: transparent;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    .pill[_ngcontent-%COMP%]:hover { background: #e0e0e0; }\n    .pill.active[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: #fff;\n      box-shadow: 0 1px 4px rgba(33,150,243,0.3);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 8px;\n      background: #fff;\n      color: #555;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    .refresh-btn[_ngcontent-%COMP%]:hover { background: #f5f5f5; border-color: #bbb; }\n\n    \n\n    \n\n    \n\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 15px;\n      font-weight: 600;\n      color: #444;\n      margin-bottom: 14px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #2196f3; }\n    .section-subtitle[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 400;\n      color: #888;\n      margin-left: 4px;\n    }\n\n    \n\n    \n\n    \n\n    .card[_ngcontent-%COMP%] {\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n      padding: 20px;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n    .card[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n    }\n    .card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 14px 0;\n      font-size: 13px;\n      font-weight: 600;\n      color: #555;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #2196f3; font-size: 14px; }\n\n    \n\n    \n\n    \n\n    .trend-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      margin-bottom: 28px;\n    }\n\n    \n\n    .bar-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n    .bar-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 60px 1fr 52px;\n      align-items: center;\n      gap: 8px;\n    }\n    .bar-label[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #888;\n      font-weight: 500;\n      text-align: right;\n      white-space: nowrap;\n    }\n    .bar-track[_ngcontent-%COMP%] {\n      height: 14px;\n      background: #f0f0f0;\n      border-radius: 7px;\n      overflow: hidden;\n      position: relative;\n    }\n    .bar-track.stacked[_ngcontent-%COMP%] {\n      display: flex;\n    }\n    .bar-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 7px;\n      transition: width 0.4s ease;\n    }\n    .bar-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: #555;\n      text-align: right;\n    }\n\n    \n\n    .pass-rate-bar[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, #66bb6a, #43a047);\n    }\n    .cost-bar[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, #ffa726, #f57c00);\n    }\n    .score-excellent[_ngcontent-%COMP%] { background: linear-gradient(90deg, #66bb6a, #43a047); }\n    .score-good[_ngcontent-%COMP%]      { background: linear-gradient(90deg, #42a5f5, #1e88e5); }\n    .score-fair[_ngcontent-%COMP%]      { background: linear-gradient(90deg, #ffa726, #f57c00); }\n    .score-poor[_ngcontent-%COMP%]      { background: linear-gradient(90deg, #ef5350, #e53935); }\n\n    \n\n    .text-excellent[_ngcontent-%COMP%] { color: #43a047; }\n    .text-good[_ngcontent-%COMP%]      { color: #1e88e5; }\n    .text-fair[_ngcontent-%COMP%]      { color: #f57c00; }\n    .text-poor[_ngcontent-%COMP%]      { color: #e53935; }\n    .text-pass-good[_ngcontent-%COMP%] { color: #43a047; }\n    .text-pass-warn[_ngcontent-%COMP%] { color: #f57c00; }\n    .text-pass-bad[_ngcontent-%COMP%]  { color: #e53935; }\n\n    \n\n    .bar-segment[_ngcontent-%COMP%] { height: 100%; transition: width 0.4s ease; }\n    .passed-seg[_ngcontent-%COMP%]  { background: #66bb6a; }\n    .failed-seg[_ngcontent-%COMP%]  { background: #ef5350; }\n    .skipped-seg[_ngcontent-%COMP%] { background: #bdbdbd; }\n\n    .legend-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      margin-top: 8px;\n      font-size: 10px;\n      color: #888;\n    }\n    .legend-dot[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      display: inline-block;\n      margin-left: 8px;\n    }\n    .legend-dot[_ngcontent-%COMP%]:first-child { margin-left: 0; }\n    .legend-dot.passed-seg[_ngcontent-%COMP%]  { background: #66bb6a; }\n    .legend-dot.failed-seg[_ngcontent-%COMP%]  { background: #ef5350; }\n    .legend-dot.skipped-seg[_ngcontent-%COMP%] { background: #bdbdbd; }\n\n    .trend-direction[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      font-size: 12px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .trend-up[_ngcontent-%COMP%]      { color: #43a047; }\n    .trend-down[_ngcontent-%COMP%]    { color: #e53935; }\n    .trend-neutral[_ngcontent-%COMP%] { color: #9e9e9e; }\n\n    \n\n    \n\n    \n\n    .insights-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 16px;\n      margin-bottom: 28px;\n    }\n\n    .insight-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    .insight-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr auto auto;\n      align-items: center;\n      gap: 10px;\n      padding: 8px 10px;\n      border-radius: 6px;\n      transition: background 0.15s ease;\n    }\n    .insight-row[_ngcontent-%COMP%]:hover { background: #f8f9fa; }\n    .insight-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .badge-fail[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #e53935;\n      font-size: 11px;\n      font-weight: 700;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n    .insight-primary[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 700;\n      color: #1e88e5;\n    }\n    .insight-secondary[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 500;\n      color: #999;\n    }\n\n    \n\n    \n\n    \n\n    .distribution-card[_ngcontent-%COMP%] {\n      margin-bottom: 28px;\n    }\n    .distribution-bars[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n    .dist-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 110px 1fr 40px 50px;\n      align-items: center;\n      gap: 10px;\n    }\n    .dist-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: #555;\n    }\n    .dist-track[_ngcontent-%COMP%] {\n      height: 22px;\n      background: #f0f0f0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n    .dist-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 6px;\n      transition: width 0.4s ease;\n    }\n    .dist-count[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 700;\n      color: #333;\n      text-align: right;\n    }\n    .dist-pct[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: #888;\n      text-align: right;\n    }\n\n    \n\n    \n\n    \n\n    .version-card[_ngcontent-%COMP%] {\n      margin-bottom: 28px;\n    }\n    .version-table-wrap[_ngcontent-%COMP%] {\n      overflow-x: auto;\n    }\n    .version-table[_ngcontent-%COMP%] {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n    .version-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left;\n      font-size: 11px;\n      font-weight: 600;\n      color: #888;\n      text-transform: uppercase;\n      padding: 10px 12px;\n      border-bottom: 2px solid #eee;\n    }\n    .version-table[_ngcontent-%COMP%]   th.num[_ngcontent-%COMP%], \n   .version-table[_ngcontent-%COMP%]   td.num[_ngcontent-%COMP%] { text-align: right; }\n    .version-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n      padding: 10px 12px;\n      border-bottom: 1px solid #f0f0f0;\n      color: #333;\n      vertical-align: middle;\n    }\n    .version-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover { background: #f8f9fa; }\n    .version-label[_ngcontent-%COMP%] {\n      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n      font-weight: 600;\n      font-size: 12px;\n      color: #1e88e5;\n    }\n    .version-agent[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 11px;\n      color: #999;\n      margin-top: 2px;\n    }\n\n    .delta[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      margin-left: 6px;\n      padding: 1px 6px;\n      border-radius: 4px;\n    }\n    .delta[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; }\n    .delta-up[_ngcontent-%COMP%]   { background: #e8f5e9; color: #43a047; }\n    .delta-down[_ngcontent-%COMP%] { background: #ffebee; color: #e53935; }\n    .delta-neutral[_ngcontent-%COMP%] { background: #f5f5f5; color: #9e9e9e; }\n\n    \n\n    \n\n    \n\n    .empty-mini[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 32px 16px;\n      color: #bbb;\n      gap: 8px;\n    }\n    .empty-mini[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 28px; opacity: 0.5; }\n    .empty-mini[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { font-size: 12px; }\n\n    \n\n    \n\n    \n\n    @media (max-width: 1100px) {\n      .trend-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n      .insights-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr 1fr; }\n    }\n    @media (max-width: 720px) {\n      .page-header[_ngcontent-%COMP%] { flex-direction: column; align-items: flex-start; }\n      .insights-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n      .dist-row[_ngcontent-%COMP%] { grid-template-columns: 80px 1fr 32px 42px; }\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingAnalyticsComponent, [{
         type: Component,
         args: [{ selector: 'app-testing-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="testing-analytics">
-      <div class="analytics-header">
+
+      <!-- ===== 1. Page Header ===== -->
+      <div class="page-header">
         <div class="header-left">
           <h2>
             <i class="fa-solid fa-chart-bar"></i>
@@ -495,252 +899,302 @@ export class TestingAnalyticsComponent {
           </h2>
         </div>
         <div class="header-actions">
-          <select [(ngModel)]="selectedTimeRange" (change)="onTimeRangeChange()" class="time-range-select">
-            @for (range of timeRanges; track range.days) {
-              <option [value]="range.days">{{ range.label }}</option>
+          <div class="time-range-pills">
+            @for (range of TimeRanges; track range.days) {
+              <button
+                class="pill"
+                [class.active]="SelectedDays === range.days"
+                (click)="OnTimeRangeSelect(range.days)">
+                {{ range.label }}
+              </button>
             }
-          </select>
-          <button class="action-btn" (click)="refresh()">
-            <i class="fa-solid fa-refresh"></i>
+          </div>
+          <button class="refresh-btn" (click)="Refresh()">
+            <i class="fa-solid fa-arrows-rotate"></i>
             Refresh
           </button>
         </div>
       </div>
 
-      <!-- Trend Overview -->
-      <div class="analytics-section">
-        <div class="section-header">
-          <h3>
-            <i class="fa-solid fa-chart-line"></i>
-            Test Execution Trends
-          </h3>
-        </div>
-        <div class="trends-grid">
-          @for (trend of (trends$ | async) ?? []; track $index) {
-            <div class="trend-card">
-              <div class="trend-header">
-                <span class="trend-date">{{ trend.timestamp | date:'short' }}</span>
-                <span class="trend-total">{{ trend.totalRuns }} runs</span>
-              </div>
-              <div class="trend-metrics">
-                <div class="metric passed">
-                  <i class="fa-solid fa-check-circle"></i>
-                  <span>{{ trend.passed }}</span>
-                </div>
-                <div class="metric failed">
-                  <i class="fa-solid fa-times-circle"></i>
-                  <span>{{ trend.failed }}</span>
-                </div>
-                <div class="metric skipped">
-                  <i class="fa-solid fa-minus-circle"></i>
-                  <span>{{ trend.skipped }}</span>
-                </div>
-              </div>
-              <div class="trend-chart">
-                <div class="chart-bar passed" [style.width.%]="calculatePassRate(trend)"></div>
-                <div class="chart-bar failed" [style.width.%]="calculateFailRate(trend)"></div>
-                <div class="chart-bar skipped" [style.width.%]="calculateSkipRate(trend)"></div>
+      <!-- ===== 2. Trend Overview (2-column CSS charts) ===== -->
+      <div class="section-title">
+        <i class="fa-solid fa-chart-line"></i>
+        Trend Overview
+      </div>
+      <div class="trend-grid">
+
+        <!-- Pass Rate Trend -->
+        <div class="card trend-card">
+          <h4><i class="fa-solid fa-check-double"></i> Pass Rate Trend</h4>
+          @if (DisplayTrends$ | async; as trends) {
+            @if (trends.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-chart-area"></i><span>No trend data</span></div>
+            } @else {
+              <div class="bar-chart">
+                @for (t of trends; track trackTrend($index, t)) {
+                  <div class="bar-row">
+                    <span class="bar-label">{{ FormatBucketDate(t.timestamp) }}</span>
+                    <div class="bar-track">
+                      <div class="bar-fill pass-rate-bar" [style.width.%]="PassRate(t)"></div>
+                    </div>
+                    <span class="bar-value" [class]="PassRateClass(t)">{{ PassRate(t) | number:'1.0-0' }}%</span>
+                  </div>
+                }
               </div>
-              <div class="trend-footer">
-                <span class="pass-rate" [class.good]="calculatePassRate(trend) >= 80" [class.warning]="calculatePassRate(trend) >= 60 && calculatePassRate(trend) < 80" [class.poor]="calculatePassRate(trend) < 60">
-                  {{ calculatePassRate(trend).toFixed(1) }}% pass rate
-                </span>
-                <span class="cost">\${{ trend.totalCost.toFixed(2) }}</span>
+              <div class="trend-direction">
+                @if (PassRateTrendDirection$ | async; as dir) {
+                  @if (dir === 'up') {
+                    <i class="fa-solid fa-arrow-trend-up trend-up"></i> <span class="trend-up">Improving</span>
+                  } @else if (dir === 'down') {
+                    <i class="fa-solid fa-arrow-trend-down trend-down"></i> <span class="trend-down">Declining</span>
+                  } @else {
+                    <i class="fa-solid fa-minus trend-neutral"></i> <span class="trend-neutral">Stable</span>
+                  }
+                }
               </div>
-            </div>
+            }
           }
         </div>
-      </div>
 
-      <!-- Analytics Grid -->
-      <div class="analytics-grid">
-        <!-- Top Failing Tests -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-exclamation-triangle"></i>
-              Top Failing Tests
-            </h4>
-          </div>
-          <div class="card-content">
-            @for (test of (topFailingTests$ | async) ?? []; track test.testName) {
-              <div class="analytics-row">
-                <div class="row-info">
-                  <div class="row-name">{{ test.testName }}</div>
-                  <div class="row-meta">{{ test.failureCount }} failures • {{ test.failureRate.toFixed(1) }}% fail rate</div>
-                </div>
-                <div class="row-metrics">
-                  <div class="fail-bar-container">
-                    <div class="fail-bar" [style.width.%]="test.failureRate"></div>
+        <!-- Run Volume -->
+        <div class="card trend-card">
+          <h4><i class="fa-solid fa-layer-group"></i> Run Volume</h4>
+          @if (DisplayTrends$ | async; as trends) {
+            @if (trends.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-chart-bar"></i><span>No volume data</span></div>
+            } @else {
+              <div class="bar-chart">
+                @for (t of trends; track trackTrend($index, t)) {
+                  <div class="bar-row">
+                    <span class="bar-label">{{ FormatBucketDate(t.timestamp) }}</span>
+                    <div class="bar-track stacked">
+                      <div class="bar-segment passed-seg" [style.width.%]="SegmentPct(t, 'passed')"></div>
+                      <div class="bar-segment failed-seg" [style.width.%]="SegmentPct(t, 'failed')"></div>
+                      <div class="bar-segment skipped-seg" [style.width.%]="SegmentPct(t, 'skipped')"></div>
+                    </div>
+                    <span class="bar-value">{{ t.totalRuns }}</span>
                   </div>
-                </div>
+                }
               </div>
-            } @empty {
-              <div class="empty-state">
-                <i class="fa-solid fa-check-circle"></i>
-                <p>No failing tests!</p>
+              <div class="legend-row">
+                <span class="legend-dot passed-seg"></span> Passed
+                <span class="legend-dot failed-seg"></span> Failed
+                <span class="legend-dot skipped-seg"></span> Skipped
               </div>
             }
-          </div>
+          }
         </div>
 
-        <!-- Most Expensive Tests -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-dollar-sign"></i>
-              Most Expensive Tests
-            </h4>
-          </div>
-          <div class="card-content">
-            @for (test of (expensiveTests$ | async) ?? []; track test.testName) {
-              <div class="analytics-row">
-                <div class="row-info">
-                  <div class="row-name">{{ test.testName }}</div>
-                  <div class="row-meta">avg \${{ test.avgCost.toFixed(4) }}</div>
-                </div>
-                <div class="row-metrics">
-                  <div class="cost-value">\${{ test.totalCost.toFixed(2) }}</div>
-                </div>
-              </div>
-            } @empty {
-              <div class="empty-state">
-                <i class="fa-solid fa-dollar-sign"></i>
-                <p>No test data</p>
+        <!-- Score Trend -->
+        <div class="card trend-card">
+          <h4><i class="fa-solid fa-star-half-stroke"></i> Score Trend</h4>
+          @if (DisplayTrends$ | async; as trends) {
+            @if (trends.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-star"></i><span>No score data</span></div>
+            } @else {
+              <div class="bar-chart">
+                @for (t of trends; track trackTrend($index, t)) {
+                  <div class="bar-row">
+                    <span class="bar-label">{{ FormatBucketDate(t.timestamp) }}</span>
+                    <div class="bar-track">
+                      <div class="bar-fill" [class]="ScoreBarClass(t.averageScore)" [style.width.%]="t.averageScore * 100"></div>
+                    </div>
+                    <span class="bar-value" [class]="ScoreTextClass(t.averageScore)">{{ (t.averageScore * 100) | number:'1.0-0' }}%</span>
+                  </div>
+                }
               </div>
             }
-          </div>
+          }
         </div>
 
-        <!-- Slowest Tests -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-clock"></i>
-              Slowest Tests
-            </h4>
-          </div>
-          <div class="card-content">
-            @for (test of (slowestTests$ | async) ?? []; track test.testName) {
-              <div class="analytics-row">
-                <div class="row-info">
-                  <div class="row-name">{{ test.testName }}</div>
-                  <div class="row-meta">avg {{ formatDuration(test.avgDuration) }}</div>
-                </div>
-                <div class="row-metrics">
-                  <div class="duration-value">{{ formatDuration(test.maxDuration) }}</div>
-                </div>
-              </div>
-            } @empty {
-              <div class="empty-state">
-                <i class="fa-solid fa-clock"></i>
-                <p>No test data</p>
+        <!-- Cost Trend -->
+        <div class="card trend-card">
+          <h4><i class="fa-solid fa-dollar-sign"></i> Cost Trend</h4>
+          @if (DisplayTrends$ | async; as trends) {
+            @if (trends.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-wallet"></i><span>No cost data</span></div>
+            } @else {
+              <div class="bar-chart">
+                @for (t of trends; track trackTrend($index, t)) {
+                  <div class="bar-row">
+                    <span class="bar-label">{{ FormatBucketDate(t.timestamp) }}</span>
+                    <div class="bar-track">
+                      <div class="bar-fill cost-bar" [style.width.%]="CostBarPct(t, trends)"></div>
+                    </div>
+                    <span class="bar-value">\${{ t.totalCost | number:'1.2-2' }}</span>
+                  </div>
+                }
               </div>
             }
-          </div>
+          }
         </div>
+      </div>
 
-        <!-- Test Score Distribution -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-chart-pie"></i>
-              Score Distribution
-            </h4>
-          </div>
-          <div class="card-content">
-            <div class="score-distribution">
-              @for (bucket of scoreDistribution$ | async; track bucket.label) {
-                <div class="score-bucket">
-                  <div class="bucket-label">{{ bucket.label }}</div>
-                  <div class="bucket-bar-container">
-                    <div class="bucket-bar" [style.width.%]="bucket.percentage" [class]="bucket.class"></div>
-                    <span class="bucket-count">{{ bucket.count }}</span>
+      <!-- ===== 3. Insights Section ===== -->
+      <div class="section-title">
+        <i class="fa-solid fa-magnifying-glass-chart"></i>
+        Insights
+      </div>
+      <div class="insights-grid">
+
+        <!-- Top Failing Tests -->
+        <div class="card insight-card">
+          <h4><i class="fa-solid fa-triangle-exclamation"></i> Top Failing Tests</h4>
+          @if (TopFailingTests$ | async; as tests) {
+            @if (tests.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-circle-check"></i><span>No failing tests</span></div>
+            } @else {
+              <div class="insight-list">
+                @for (t of tests; track t.testName) {
+                  <div class="insight-row">
+                    <span class="insight-name" [title]="t.testName">{{ t.testName }}</span>
+                    <span class="badge-fail">{{ t.failureCount }}</span>
+                    <span class="insight-secondary">{{ t.failureRate | number:'1.0-1' }}%</span>
                   </div>
-                  <div class="bucket-percentage">{{ bucket.percentage.toFixed(1) }}%</div>
-                </div>
-              }
-            </div>
-          </div>
+                }
+              </div>
+            }
+          }
         </div>
 
-        <!-- Cost Breakdown -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-wallet"></i>
-              Cost Breakdown
-            </h4>
-          </div>
-          <div class="card-content">
-            <div class="cost-summary">
-              <div class="cost-item total">
-                <span class="cost-label">Total Cost</span>
-                <span class="cost-amount">\${{ (totalCost$ | async) || 0 | number:'1.2-2' }}</span>
-              </div>
-              <div class="cost-item">
-                <span class="cost-label">Avg per Test</span>
-                <span class="cost-amount">\${{ (avgCostPerTest$ | async) || 0 | number:'1.4-4' }}</span>
-              </div>
-              <div class="cost-item">
-                <span class="cost-label">Avg per Run</span>
-                <span class="cost-amount">\${{ (avgCostPerRun$ | async) || 0 | number:'1.4-4' }}</span>
-              </div>
-              <div class="cost-item">
-                <span class="cost-label">Projected Monthly</span>
-                <span class="cost-amount">\${{ (projectedMonthlyCost$ | async) || 0 | number:'1.2-2' }}</span>
+        <!-- Slowest Tests -->
+        <div class="card insight-card">
+          <h4><i class="fa-solid fa-clock"></i> Slowest Tests</h4>
+          @if (SlowestTests$ | async; as tests) {
+            @if (tests.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-bolt"></i><span>No duration data</span></div>
+            } @else {
+              <div class="insight-list">
+                @for (t of tests; track t.testName) {
+                  <div class="insight-row">
+                    <span class="insight-name" [title]="t.testName">{{ t.testName }}</span>
+                    <span class="insight-primary">{{ FormatDuration(t.avgDuration) }}</span>
+                    <span class="insight-secondary">max {{ FormatDuration(t.maxDuration) }}</span>
+                  </div>
+                }
               </div>
-            </div>
-          </div>
+            }
+          }
         </div>
 
-        <!-- Performance Metrics -->
-        <div class="analytics-card">
-          <div class="card-header">
-            <h4>
-              <i class="fa-solid fa-gauge"></i>
-              Performance Metrics
-            </h4>
-          </div>
-          <div class="card-content">
-            <div class="performance-metrics">
-              <div class="perf-metric">
-                <div class="perf-icon">
-                  <i class="fa-solid fa-bolt"></i>
-                </div>
-                <div class="perf-content">
-                  <div class="perf-value">{{ formatDuration((avgExecutionTime$ | async) || 0) }}</div>
-                  <div class="perf-label">Avg Execution Time</div>
-                </div>
-              </div>
-              <div class="perf-metric">
-                <div class="perf-icon">
-                  <i class="fa-solid fa-chart-line"></i>
-                </div>
-                <div class="perf-content">
-                  <div class="perf-value">{{ (throughput$ | async) || 0 | number:'1.1-1' }}</div>
-                  <div class="perf-label">Tests per Day</div>
-                </div>
+        <!-- Most Expensive Tests -->
+        <div class="card insight-card">
+          <h4><i class="fa-solid fa-coins"></i> Most Expensive Tests</h4>
+          @if (MostExpensiveTests$ | async; as tests) {
+            @if (tests.length === 0) {
+              <div class="empty-mini"><i class="fa-solid fa-dollar-sign"></i><span>No cost data</span></div>
+            } @else {
+              <div class="insight-list">
+                @for (t of tests; track t.testName) {
+                  <div class="insight-row">
+                    <span class="insight-name" [title]="t.testName">{{ t.testName }}</span>
+                    <span class="insight-primary">\${{ t.totalCost | number:'1.2-2' }}</span>
+                    <span class="insight-secondary">\${{ t.avgCost | number:'1.4-4' }}/run</span>
+                  </div>
+                }
               </div>
-              <div class="perf-metric">
-                <div class="perf-icon">
-                  <i class="fa-solid fa-check-double"></i>
-                </div>
-                <div class="perf-content">
-                  <div class="perf-value">{{ (reliabilityScore$ | async) || 0 | number:'1.1-1' }}%</div>
-                  <div class="perf-label">Reliability Score</div>
+            }
+          }
+        </div>
+      </div>
+
+      <!-- ===== 4. Score Distribution ===== -->
+      <div class="section-title">
+        <i class="fa-solid fa-chart-pie"></i>
+        Score Distribution
+      </div>
+      <div class="card distribution-card">
+        @if (ScoreDistribution$ | async; as buckets) {
+          @if (buckets.length === 0) {
+            <div class="empty-mini"><i class="fa-solid fa-chart-simple"></i><span>No score data available</span></div>
+          } @else {
+            <div class="distribution-bars">
+              @for (b of buckets; track b.label) {
+                <div class="dist-row">
+                  <span class="dist-label">{{ b.label }}</span>
+                  <div class="dist-track">
+                    <div class="dist-fill" [style.width.%]="b.percentage" [style.background]="b.color"></div>
+                  </div>
+                  <span class="dist-count">{{ b.count }}</span>
+                  <span class="dist-pct">{{ b.percentage | number:'1.0-1' }}%</span>
                 </div>
-              </div>
+              }
             </div>
+          }
+        }
+      </div>
+
+      <!-- ===== 5. Version Comparison ===== -->
+      <div class="section-title">
+        <i class="fa-solid fa-code-compare"></i>
+        Version Comparison
+        <span class="section-subtitle">Compare metrics across different builds</span>
+      </div>
+      <div class="card version-card">
+        @if (IsLoadingVersions) {
+          <div class="empty-mini"><i class="fa-solid fa-spinner fa-spin"></i><span>Loading versions...</span></div>
+        } @else if (VersionRows.length === 0) {
+          <div class="empty-mini"><i class="fa-solid fa-code-branch"></i><span>No version data available</span></div>
+        } @else {
+          <div class="version-table-wrap">
+            <table class="version-table">
+              <thead>
+                <tr>
+                  <th>Version</th>
+                  <th>Date</th>
+                  <th class="num">Tests</th>
+                  <th class="num">Pass Rate</th>
+                  <th class="num">Cost</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (row of VersionRows; track row.version) {
+                  <tr>
+                    <td>
+                      <span class="version-label">{{ row.gitCommitShort }}</span>
+                      <span class="version-agent">{{ row.agentVersion }}</span>
+                    </td>
+                    <td>{{ row.date | date:'mediumDate' }}</td>
+                    <td class="num">{{ row.totalTests }}</td>
+                    <td class="num">
+                      <span>{{ row.passRate | number:'1.1-1' }}%</span>
+                      @if (row.passRateDelta !== null) {
+                        <span class="delta" [class.delta-up]="row.passRateDelta > 0" [class.delta-down]="row.passRateDelta < 0" [class.delta-neutral]="row.passRateDelta === 0">
+                          @if (row.passRateDelta > 0) {
+                            <i class="fa-solid fa-arrow-up"></i>
+                          } @else if (row.passRateDelta < 0) {
+                            <i class="fa-solid fa-arrow-down"></i>
+                          }
+                          {{ AbsNum(row.passRateDelta) | number:'1.1-1' }}%
+                        </span>
+                      }
+                    </td>
+                    <td class="num">
+                      <span>\${{ row.totalCost | number:'1.2-2' }}</span>
+                      @if (row.costDelta !== null) {
+                        <span class="delta" [class.delta-up]="row.costDelta < 0" [class.delta-down]="row.costDelta > 0" [class.delta-neutral]="row.costDelta === 0">
+                          @if (row.costDelta > 0) {
+                            <i class="fa-solid fa-arrow-up"></i>
+                          } @else if (row.costDelta < 0) {
+                            <i class="fa-solid fa-arrow-down"></i>
+                          }
+                          {{ AbsNum(row.costDelta) | number:'1.1-1' }}%
+                        </span>
+                      }
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
           </div>
-        </div>
+        }
       </div>
     </div>
-  `, styles: ["\n    .testing-analytics {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analytics-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left h2 i {\n      color: #2196f3;\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-range-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      background: white;\n      cursor: pointer;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      background: white;\n      color: #666;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .analytics-section {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 24px;\n    }\n\n    .section-header {\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 2px solid #f0f0f0;\n    }\n\n    .section-header h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header h3 i {\n      color: #2196f3;\n    }\n\n    .trends-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .trend-card {\n      background: #f8f9fa;\n      padding: 16px;\n      border-radius: 6px;\n      border: 1px solid #e0e0e0;\n    }\n\n    .trend-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .trend-date {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n    }\n\n    .trend-total {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .trend-metrics {\n      display: flex;\n      gap: 12px;\n      margin-bottom: 12px;\n    }\n\n    .metric {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      font-weight: 600;\n    }\n\n    .metric.passed {\n      color: #4caf50;\n    }\n\n    .metric.failed {\n      color: #f44336;\n    }\n\n    .metric.skipped {\n      color: #9e9e9e;\n    }\n\n    .trend-chart {\n      display: flex;\n      height: 8px;\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 12px;\n      background: #e0e0e0;\n    }\n\n    .chart-bar {\n      transition: width 0.3s ease;\n    }\n\n    .chart-bar.passed {\n      background: #4caf50;\n    }\n\n    .chart-bar.failed {\n      background: #f44336;\n    }\n\n    .chart-bar.skipped {\n      background: #9e9e9e;\n    }\n\n    .trend-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 11px;\n    }\n\n    .pass-rate {\n      font-weight: 600;\n      padding: 2px 8px;\n      border-radius: 12px;\n    }\n\n    .pass-rate.good {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .pass-rate.warning {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .pass-rate.poor {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .cost {\n      color: #666;\n      font-weight: 600;\n    }\n\n    .analytics-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n      gap: 20px;\n    }\n\n    .analytics-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .card-header {\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .card-header h4 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .card-header h4 i {\n      color: #2196f3;\n    }\n\n    .card-content {\n      padding: 16px;\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .analytics-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .analytics-row:hover {\n      background: #f8f9fa;\n    }\n\n    .analytics-row:last-child {\n      border-bottom: none;\n    }\n\n    .row-info {\n      flex: 1;\n    }\n\n    .row-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .row-meta {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .row-metrics {\n      min-width: 120px;\n      text-align: right;\n    }\n\n    .fail-bar-container {\n      width: 100px;\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: inline-block;\n      vertical-align: middle;\n    }\n\n    .fail-bar {\n      height: 100%;\n      background: #f44336;\n      transition: width 0.3s ease;\n    }\n\n    .cost-value,\n    .duration-value {\n      font-size: 13px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .empty-state {\n      text-align: center;\n      padding: 40px 20px;\n      color: #999;\n    }\n\n    .empty-state i {\n      font-size: 36px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .empty-state p {\n      font-size: 13px;\n      margin: 0;\n    }\n\n    .score-distribution {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .score-bucket {\n      display: grid;\n      grid-template-columns: 80px 1fr 60px;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .bucket-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .bucket-bar-container {\n      position: relative;\n      height: 24px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .bucket-bar {\n      height: 100%;\n      transition: width 0.3s ease;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n    }\n\n    .bucket-bar.excellent {\n      background: #4caf50;\n    }\n\n    .bucket-bar.good {\n      background: #8bc34a;\n    }\n\n    .bucket-bar.fair {\n      background: #ff9800;\n    }\n\n    .bucket-bar.poor {\n      background: #ff5722;\n    }\n\n    .bucket-bar.fail {\n      background: #f44336;\n    }\n\n    .bucket-count {\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .bucket-percentage {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-align: right;\n    }\n\n    .cost-summary {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .cost-item {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .cost-item.total {\n      background: #e3f2fd;\n      border: 2px solid #2196f3;\n    }\n\n    .cost-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .cost-item.total .cost-label {\n      color: #2196f3;\n    }\n\n    .cost-amount {\n      font-size: 16px;\n      font-weight: 700;\n      color: #333;\n    }\n\n    .cost-item.total .cost-amount {\n      color: #2196f3;\n      font-size: 20px;\n    }\n\n    .performance-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .perf-metric {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .perf-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      background: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .perf-content {\n      flex: 1;\n    }\n\n    .perf-value {\n      font-size: 20px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .perf-label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n    }\n\n    @media (max-width: 1200px) {\n      .analytics-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  "] }]
+  `, styles: ["\n    /* ------------------------------------------------------------------ */\n    /*  Layout & page                                                      */\n    /* ------------------------------------------------------------------ */\n    .testing-analytics {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    /* ------------------------------------------------------------------ */\n    /*  Page header                                                        */\n    /* ------------------------------------------------------------------ */\n    .page-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 12px;\n      background: #fff;\n      padding: 20px 24px;\n      border-radius: 12px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n      margin-bottom: 24px;\n    }\n    .header-left h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .header-left h2 i { color: #2196f3; }\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-wrap: wrap;\n    }\n\n    /* time-range pills */\n    .time-range-pills {\n      display: flex;\n      gap: 4px;\n      background: #f0f0f0;\n      border-radius: 8px;\n      padding: 3px;\n    }\n    .pill {\n      padding: 6px 14px;\n      border: none;\n      border-radius: 6px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      background: transparent;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    .pill:hover { background: #e0e0e0; }\n    .pill.active {\n      background: #2196f3;\n      color: #fff;\n      box-shadow: 0 1px 4px rgba(33,150,243,0.3);\n    }\n\n    .refresh-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      border-radius: 8px;\n      background: #fff;\n      color: #555;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    .refresh-btn:hover { background: #f5f5f5; border-color: #bbb; }\n\n    /* ------------------------------------------------------------------ */\n    /*  Section titles                                                     */\n    /* ------------------------------------------------------------------ */\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 15px;\n      font-weight: 600;\n      color: #444;\n      margin-bottom: 14px;\n    }\n    .section-title i { color: #2196f3; }\n    .section-subtitle {\n      font-size: 12px;\n      font-weight: 400;\n      color: #888;\n      margin-left: 4px;\n    }\n\n    /* ------------------------------------------------------------------ */\n    /*  Cards                                                              */\n    /* ------------------------------------------------------------------ */\n    .card {\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n      padding: 20px;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n    .card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n    }\n    .card h4 {\n      margin: 0 0 14px 0;\n      font-size: 13px;\n      font-weight: 600;\n      color: #555;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    .card h4 i { color: #2196f3; font-size: 14px; }\n\n    /* ------------------------------------------------------------------ */\n    /*  Trend grid (2 columns)                                             */\n    /* ------------------------------------------------------------------ */\n    .trend-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      margin-bottom: 28px;\n    }\n\n    /* CSS bar charts */\n    .bar-chart {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n    .bar-row {\n      display: grid;\n      grid-template-columns: 60px 1fr 52px;\n      align-items: center;\n      gap: 8px;\n    }\n    .bar-label {\n      font-size: 10px;\n      color: #888;\n      font-weight: 500;\n      text-align: right;\n      white-space: nowrap;\n    }\n    .bar-track {\n      height: 14px;\n      background: #f0f0f0;\n      border-radius: 7px;\n      overflow: hidden;\n      position: relative;\n    }\n    .bar-track.stacked {\n      display: flex;\n    }\n    .bar-fill {\n      height: 100%;\n      border-radius: 7px;\n      transition: width 0.4s ease;\n    }\n    .bar-value {\n      font-size: 11px;\n      font-weight: 600;\n      color: #555;\n      text-align: right;\n    }\n\n    /* colour classes for bars */\n    .pass-rate-bar {\n      background: linear-gradient(90deg, #66bb6a, #43a047);\n    }\n    .cost-bar {\n      background: linear-gradient(90deg, #ffa726, #f57c00);\n    }\n    .score-excellent { background: linear-gradient(90deg, #66bb6a, #43a047); }\n    .score-good      { background: linear-gradient(90deg, #42a5f5, #1e88e5); }\n    .score-fair      { background: linear-gradient(90deg, #ffa726, #f57c00); }\n    .score-poor      { background: linear-gradient(90deg, #ef5350, #e53935); }\n\n    /* text colour classes */\n    .text-excellent { color: #43a047; }\n    .text-good      { color: #1e88e5; }\n    .text-fair      { color: #f57c00; }\n    .text-poor      { color: #e53935; }\n    .text-pass-good { color: #43a047; }\n    .text-pass-warn { color: #f57c00; }\n    .text-pass-bad  { color: #e53935; }\n\n    /* stacked segments */\n    .bar-segment { height: 100%; transition: width 0.4s ease; }\n    .passed-seg  { background: #66bb6a; }\n    .failed-seg  { background: #ef5350; }\n    .skipped-seg { background: #bdbdbd; }\n\n    .legend-row {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      margin-top: 8px;\n      font-size: 10px;\n      color: #888;\n    }\n    .legend-dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      display: inline-block;\n      margin-left: 8px;\n    }\n    .legend-dot:first-child { margin-left: 0; }\n    .legend-dot.passed-seg  { background: #66bb6a; }\n    .legend-dot.failed-seg  { background: #ef5350; }\n    .legend-dot.skipped-seg { background: #bdbdbd; }\n\n    .trend-direction {\n      margin-top: 10px;\n      font-size: 12px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .trend-up      { color: #43a047; }\n    .trend-down    { color: #e53935; }\n    .trend-neutral { color: #9e9e9e; }\n\n    /* ------------------------------------------------------------------ */\n    /*  Insights grid (3 columns)                                          */\n    /* ------------------------------------------------------------------ */\n    .insights-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 16px;\n      margin-bottom: 28px;\n    }\n\n    .insight-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n    .insight-row {\n      display: grid;\n      grid-template-columns: 1fr auto auto;\n      align-items: center;\n      gap: 10px;\n      padding: 8px 10px;\n      border-radius: 6px;\n      transition: background 0.15s ease;\n    }\n    .insight-row:hover { background: #f8f9fa; }\n    .insight-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .badge-fail {\n      background: #ffebee;\n      color: #e53935;\n      font-size: 11px;\n      font-weight: 700;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n    .insight-primary {\n      font-size: 12px;\n      font-weight: 700;\n      color: #1e88e5;\n    }\n    .insight-secondary {\n      font-size: 11px;\n      font-weight: 500;\n      color: #999;\n    }\n\n    /* ------------------------------------------------------------------ */\n    /*  Score Distribution                                                 */\n    /* ------------------------------------------------------------------ */\n    .distribution-card {\n      margin-bottom: 28px;\n    }\n    .distribution-bars {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n    .dist-row {\n      display: grid;\n      grid-template-columns: 110px 1fr 40px 50px;\n      align-items: center;\n      gap: 10px;\n    }\n    .dist-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: #555;\n    }\n    .dist-track {\n      height: 22px;\n      background: #f0f0f0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n    .dist-fill {\n      height: 100%;\n      border-radius: 6px;\n      transition: width 0.4s ease;\n    }\n    .dist-count {\n      font-size: 12px;\n      font-weight: 700;\n      color: #333;\n      text-align: right;\n    }\n    .dist-pct {\n      font-size: 11px;\n      font-weight: 600;\n      color: #888;\n      text-align: right;\n    }\n\n    /* ------------------------------------------------------------------ */\n    /*  Version Comparison                                                 */\n    /* ------------------------------------------------------------------ */\n    .version-card {\n      margin-bottom: 28px;\n    }\n    .version-table-wrap {\n      overflow-x: auto;\n    }\n    .version-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n    .version-table th {\n      text-align: left;\n      font-size: 11px;\n      font-weight: 600;\n      color: #888;\n      text-transform: uppercase;\n      padding: 10px 12px;\n      border-bottom: 2px solid #eee;\n    }\n    .version-table th.num,\n    .version-table td.num { text-align: right; }\n    .version-table td {\n      padding: 10px 12px;\n      border-bottom: 1px solid #f0f0f0;\n      color: #333;\n      vertical-align: middle;\n    }\n    .version-table tbody tr:hover { background: #f8f9fa; }\n    .version-label {\n      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n      font-weight: 600;\n      font-size: 12px;\n      color: #1e88e5;\n    }\n    .version-agent {\n      display: block;\n      font-size: 11px;\n      color: #999;\n      margin-top: 2px;\n    }\n\n    .delta {\n      display: inline-flex;\n      align-items: center;\n      gap: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      margin-left: 6px;\n      padding: 1px 6px;\n      border-radius: 4px;\n    }\n    .delta i { font-size: 9px; }\n    .delta-up   { background: #e8f5e9; color: #43a047; }\n    .delta-down { background: #ffebee; color: #e53935; }\n    .delta-neutral { background: #f5f5f5; color: #9e9e9e; }\n\n    /* ------------------------------------------------------------------ */\n    /*  Empty / mini empty states                                          */\n    /* ------------------------------------------------------------------ */\n    .empty-mini {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 32px 16px;\n      color: #bbb;\n      gap: 8px;\n    }\n    .empty-mini i { font-size: 28px; opacity: 0.5; }\n    .empty-mini span { font-size: 12px; }\n\n    /* ------------------------------------------------------------------ */\n    /*  Responsive                                                         */\n    /* ------------------------------------------------------------------ */\n    @media (max-width: 1100px) {\n      .trend-grid { grid-template-columns: 1fr; }\n      .insights-grid { grid-template-columns: 1fr 1fr; }\n    }\n    @media (max-width: 720px) {\n      .page-header { flex-direction: column; align-items: flex-start; }\n      .insights-grid { grid-template-columns: 1fr; }\n      .dist-row { grid-template-columns: 80px 1fr 32px 42px; }\n    }\n  "] }]
     }], () => [{ type: i1.TestingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
             type: Input
         }], stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingAnalyticsComponent, { className: "TestingAnalyticsComponent", filePath: "src/Testing/components/testing-analytics.component.ts", lineNumber: 756 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingAnalyticsComponent, { className: "TestingAnalyticsComponent", filePath: "src/Testing/components/testing-analytics.component.ts", lineNumber: 778 }); })();
 //# sourceMappingURL=testing-analytics.component.js.map