import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
import { takeUntil, map } from 'rxjs/operators';
import { CompositeKey } from '@memberjunction/core';
import { SharedService } from '@memberjunction/ng-shared';
import { DEFAULT_EVALUATION_PREFERENCES } from '@memberjunction/ng-testing';
import * as i0 from "@angular/core";
import * as i1 from "../services/testing-instrumentation.service";
import * as i2 from "@memberjunction/ng-testing";
import * as i3 from "@angular/forms";
import * as i4 from "@memberjunction/ng-shared-generic";
import * as i5 from "@angular/common";
const _forTrack0 = ($index, $item) => $item.value;
function TestingRunsComponent_For_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i");
} if (rf & 2) {
    const chip_r2 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵclassMap(chip_r2.icon);
} }
function TestingRunsComponent_For_17_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 36);
    i0.ɵɵlistener("click", function TestingRunsComponent_For_17_Template_button_click_0_listener() { const chip_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetStatusFilter(chip_r2.value)); });
    i0.ɵɵconditionalCreate(1, TestingRunsComponent_For_17_Conditional_1_Template, 1, 2, "i", 37);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const chip_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", ctx_r2.filterState.status === chip_r2.value);
    i0.ɵɵattribute("data-status", chip_r2.value);
    i0.ɵɵadvance();
    i0.ɵɵconditional(chip_r2.icon ? 1 : -1);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", chip_r2.label, " ");
} }
function TestingRunsComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 38);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ClearSearch()); });
    i0.ɵɵelement(1, "i", 39);
    i0.ɵɵelementEnd();
} }
function TestingRunsComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 24)(1, "div", 40)(2, "div", 41);
    i0.ɵɵelement(3, "i", 42);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 43)(5, "div", 44);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 45);
    i0.ɵɵtext(8, "Total Runs");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(9, "div", 40)(10, "div", 46);
    i0.ɵɵelement(11, "i", 47);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "div", 43)(13, "div", 44);
    i0.ɵɵtext(14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "div", 45);
    i0.ɵɵtext(16, "Pass Rate");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "div", 40)(18, "div", 48);
    i0.ɵɵelement(19, "i", 49);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "div", 43)(21, "div", 44);
    i0.ɵɵtext(22);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(23, "div", 45);
    i0.ɵɵtext(24, "Avg Duration");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(25, "div", 40)(26, "div", 50);
    i0.ɵɵelement(27, "i", 51);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(28, "div", 43)(29, "div", 44);
    i0.ɵɵtext(30);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(31, "div", 45);
    i0.ɵɵtext(32, "Total Cost");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const stats_r5 = ctx;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate(stats_r5.totalRuns);
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.FormatPercent(stats_r5.passRate));
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDuration(stats_r5.avgDuration));
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.FormatCostTotal(stats_r5.totalCost));
} }
function TestingRunsComponent_Conditional_53_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 34);
    i0.ɵɵelement(1, "mj-loading", 52);
    i0.ɵɵelementEnd();
} }
function TestingRunsComponent_Conditional_56_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 35);
    i0.ɵɵelement(1, "i", 53);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No test runs found");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 54);
    i0.ɵɵtext(5, "Try adjusting your filters or run a new test.");
    i0.ɵɵelementEnd()();
} }
function TestingRunsComponent_Conditional_57_For_1_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 56);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_57_For_1_Template_div_click_0_listener() { const run_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SelectRun(run_r7)); });
    i0.ɵɵelementStart(1, "div", 27)(2, "span", 57);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_57_For_1_Template_span_click_2_listener($event) { const run_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.NavigateToTest(run_r7, $event)); });
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(4, "div", 28);
    i0.ɵɵelement(5, "app-evaluation-badge", 58);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 29);
    i0.ɵɵelement(7, "app-score-indicator", 59);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 30);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 31);
    i0.ɵɵelement(11, "app-cost-display", 60);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "div", 32);
    i0.ɵɵtext(13);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "div", 33)(15, "button", 61);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_57_For_1_Template_button_click_15_listener($event) { const run_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.SelectRun(run_r7); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(16, "i", 62);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(17, "button", 63);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_57_For_1_Template_button_click_17_listener($event) { const run_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.RerunTest(run_r7); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(18, "i", 64);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const run_r7 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("is-running", run_r7.status === "Running")("is-selected", (ctx_r2.SelectedRun == null ? null : ctx_r2.SelectedRun.id) === run_r7.id);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", run_r7.testName, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("executionStatus", run_r7.status)("originalStatus", run_r7.status)("autoScore", run_r7.score)("passedChecks", run_r7.passedChecks)("failedChecks", run_r7.failedChecks)("totalChecks", run_r7.totalChecks)("humanRating", run_r7.humanRating)("humanIsCorrect", run_r7.humanIsCorrect)("hasHumanFeedback", run_r7.hasHumanFeedback)("preferences", ctx_r2.EvalPreferences);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("score", run_r7.score)("showBar", true);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDuration(run_r7.duration));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("cost", run_r7.cost);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatRelativeTime(run_r7.runDateTime));
} }
function TestingRunsComponent_Conditional_57_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵrepeaterCreate(0, TestingRunsComponent_Conditional_57_For_1_Template, 19, 20, "div", 55, i0.ɵɵcomponentInstance().TrackByRunId, true);
    i0.ɵɵpipe(2, "async");
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵrepeater(i0.ɵɵpipeBind1(2, 0, ctx_r2.FilteredRuns$));
} }
function TestingRunsComponent_Conditional_58_Conditional_34_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 76)(1, "h4");
    i0.ɵɵelement(2, "i", 83);
    i0.ɵɵtext(3, " Execution Context");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(4, "mj-execution-context");
    i0.ɵɵelementEnd();
} }
function TestingRunsComponent_Conditional_58_Conditional_39_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 87);
    i0.ɵɵtext(1, " Yes ");
} }
function TestingRunsComponent_Conditional_58_Conditional_39_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 88);
    i0.ɵɵtext(1, " No ");
} }
function TestingRunsComponent_Conditional_58_Conditional_39_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0, " -- ");
} }
function TestingRunsComponent_Conditional_58_Conditional_39_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 86);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r2.SelectedRun.humanComments);
} }
function TestingRunsComponent_Conditional_58_Conditional_39_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 81)(1, "span", 84);
    i0.ɵɵtext(2, "Rating:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 85);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 84);
    i0.ɵɵtext(6, "Correct:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "span", 85);
    i0.ɵɵconditionalCreate(8, TestingRunsComponent_Conditional_58_Conditional_39_Conditional_8_Template, 2, 0)(9, TestingRunsComponent_Conditional_58_Conditional_39_Conditional_9_Template, 2, 0)(10, TestingRunsComponent_Conditional_58_Conditional_39_Conditional_10_Template, 1, 0);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(11, TestingRunsComponent_Conditional_58_Conditional_39_Conditional_11_Template, 2, 1, "div", 86);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1("", ctx_r2.SelectedRun.humanRating, "/10");
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r2.SelectedRun.humanIsCorrect === true ? 8 : ctx_r2.SelectedRun.humanIsCorrect === false ? 9 : 10);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r2.SelectedRun.humanComments ? 11 : -1);
} }
function TestingRunsComponent_Conditional_58_Conditional_40_For_6_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 100);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Conditional_40_For_6_Template_button_click_0_listener() { const n_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.feedbackRating = n_r11); });
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const n_r11 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵclassProp("selected", ctx_r2.feedbackRating === n_r11);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", n_r11, " ");
} }
function TestingRunsComponent_Conditional_58_Conditional_40_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 82)(1, "div", 89)(2, "label");
    i0.ɵɵtext(3, "Rating");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 90);
    i0.ɵɵrepeaterCreate(5, TestingRunsComponent_Conditional_58_Conditional_40_For_6_Template, 2, 3, "button", 91, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 92)(8, "label");
    i0.ɵɵtext(9, "Is the result correct?");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 93)(11, "button", 94);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Conditional_40_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.feedbackIsCorrect = true); });
    i0.ɵɵelement(12, "i", 95);
    i0.ɵɵtext(13, " Yes ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "button", 94);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Conditional_40_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.feedbackIsCorrect = false); });
    i0.ɵɵelement(15, "i", 39);
    i0.ɵɵtext(16, " No ");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "div", 96)(18, "label");
    i0.ɵɵtext(19, "Comments");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "textarea", 97);
    i0.ɵɵlistener("input", function TestingRunsComponent_Conditional_58_Conditional_40_Template_textarea_input_20_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnFeedbackCommentInput($event)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(21, "button", 98);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Conditional_40_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.SubmitFeedback()); });
    i0.ɵɵelement(22, "i", 99);
    i0.ɵɵtext(23);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(5);
    i0.ɵɵrepeater(ctx_r2.RatingValues);
    i0.ɵɵadvance(6);
    i0.ɵɵclassProp("active", ctx_r2.feedbackIsCorrect === true);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r2.feedbackIsCorrect === false);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("value", ctx_r2.feedbackComments);
    i0.ɵɵadvance();
    i0.ɵɵproperty("disabled", ctx_r2.IsSubmittingFeedback);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.IsSubmittingFeedback ? "Submitting..." : "Submit Feedback", " ");
} }
function TestingRunsComponent_Conditional_58_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 65);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseDetailPanel()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(1, "div", 66)(2, "div", 67)(3, "div", 68)(4, "h3");
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelement(6, "app-test-status-badge", 69);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "button", 70);
    i0.ɵɵlistener("click", function TestingRunsComponent_Conditional_58_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CloseDetailPanel()); });
    i0.ɵɵelement(8, "i", 39);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(9, "div", 71)(10, "div", 72)(11, "div", 73)(12, "span", 74);
    i0.ɵɵtext(13, "Score");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(14, "app-score-indicator", 59);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "div", 73)(16, "span", 74);
    i0.ɵɵtext(17, "Duration");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "span", 75);
    i0.ɵɵtext(19);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(20, "div", 73)(21, "span", 74);
    i0.ɵɵtext(22, "Cost");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(23, "app-cost-display", 60);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(24, "div", 73)(25, "span", 74);
    i0.ɵɵtext(26, "Started");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(27, "span", 75);
    i0.ɵɵtext(28);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(29, "div", 76)(30, "h4");
    i0.ɵɵelement(31, "i", 77);
    i0.ɵɵtext(32, " Evaluation");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(33, "app-evaluation-badge", 78);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(34, TestingRunsComponent_Conditional_58_Conditional_34_Template, 5, 0, "div", 76);
    i0.ɵɵelementStart(35, "div", 79)(36, "h4");
    i0.ɵɵelement(37, "i", 80);
    i0.ɵɵtext(38, " Human Feedback");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(39, TestingRunsComponent_Conditional_58_Conditional_39_Template, 12, 3, "div", 81)(40, TestingRunsComponent_Conditional_58_Conditional_40_Template, 24, 7, "div", 82);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r2.SelectedRun.testName);
    i0.ɵɵadvance();
    i0.ɵɵproperty("status", ctx_r2.SelectedRun.status);
    i0.ɵɵadvance(8);
    i0.ɵɵproperty("score", ctx_r2.SelectedRun.score)("showBar", true);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDuration(ctx_r2.SelectedRun.duration));
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("cost", ctx_r2.SelectedRun.cost);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDateTime(ctx_r2.SelectedRun.runDateTime));
    i0.ɵɵadvance(5);
    i0.ɵɵproperty("executionStatus", ctx_r2.SelectedRun.status)("originalStatus", ctx_r2.SelectedRun.status)("autoScore", ctx_r2.SelectedRun.score)("passedChecks", ctx_r2.SelectedRun.passedChecks)("failedChecks", ctx_r2.SelectedRun.failedChecks)("totalChecks", ctx_r2.SelectedRun.totalChecks)("humanRating", ctx_r2.SelectedRun.humanRating)("humanIsCorrect", ctx_r2.SelectedRun.humanIsCorrect)("hasHumanFeedback", ctx_r2.SelectedRun.hasHumanFeedback)("preferences", ctx_r2.EvalPreferences);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.SelectedRun.targetType ? 34 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵconditional(ctx_r2.SelectedRun.hasHumanFeedback ? 39 : 40);
} }
export class TestingRunsComponent {
    instrumentationService;
    testingDialogService;
    cdr;
    viewContainerRef;
    initialState = null;
    stateChange = new EventEmitter();
    destroy$ = new Subject();
    filterTrigger$ = new BehaviorSubject(undefined);
    // Filter state
    filterState = {
        status: 'all',
        timeRange: 'month',
        searchText: ''
    };
    // Feedback form state
    feedbackRating = 5;
    feedbackIsCorrect = null;
    feedbackComments = '';
    IsSubmittingFeedback = false;
    IsRefreshing = false;
    SelectedRun = null;
    EvalPreferences = { ...DEFAULT_EVALUATION_PREFERENCES, showAuto: true };
    // Observables
    FilteredRuns$;
    FilteredStats$;
    // Constants
    StatusChips = [
        { value: 'all', label: 'All', icon: '' },
        { value: 'running', label: 'Running', icon: 'fa-solid fa-spinner fa-spin' },
        { value: 'passed', label: 'Passed', icon: 'fa-solid fa-check' },
        { value: 'failed', label: 'Failed', icon: 'fa-solid fa-times' },
        { value: 'error', label: 'Error', icon: 'fa-solid fa-exclamation-triangle' }
    ];
    RatingValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    constructor(instrumentationService, testingDialogService, cdr, viewContainerRef) {
        this.instrumentationService = instrumentationService;
        this.testingDialogService = testingDialogService;
        this.cdr = cdr;
        this.viewContainerRef = viewContainerRef;
    }
    ngOnInit() {
        this.applyInitialState();
        this.updateServiceDateRange();
        this.setupObservables();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    OnEscapeKey() {
        if (this.SelectedRun) {
            this.CloseDetailPanel();
        }
    }
    // ------- Public Methods -------
    SetStatusFilter(status) {
        this.filterState.status = status;
        this.filterTrigger$.next();
        this.emitStateChange();
        this.cdr.markForCheck();
    }
    OnTimeRangeChange(event) {
        const select = event.target;
        this.filterState.timeRange = select.value;
        this.updateServiceDateRange();
        this.emitStateChange();
        this.cdr.markForCheck();
    }
    OnSearchInput(event) {
        const input = event.target;
        this.filterState.searchText = input.value;
        this.filterTrigger$.next();
        this.emitStateChange();
        this.cdr.markForCheck();
    }
    ClearSearch() {
        this.filterState.searchText = '';
        this.filterTrigger$.next();
        this.emitStateChange();
        this.cdr.markForCheck();
    }
    Refresh() {
        this.IsRefreshing = true;
        this.instrumentationService.refresh();
        setTimeout(() => {
            this.IsRefreshing = false;
            this.cdr.markForCheck();
        }, 1000);
    }
    StartNewTest() {
        console.log('[TestingRuns] StartNewTest called, service IsPanelOpen before:', this.testingDialogService.IsPanelOpen);
        this.testingDialogService.OpenAsPanel();
        console.log('[TestingRuns] After OpenAsPanel, IsPanelOpen:', this.testingDialogService.IsPanelOpen);
    }
    SelectRun(run) {
        this.SelectedRun = run;
        this.resetFeedbackForm();
        this.cdr.markForCheck();
    }
    CloseDetailPanel() {
        this.SelectedRun = null;
        this.cdr.markForCheck();
    }
    NavigateToTest(run, event) {
        event.stopPropagation();
        SharedService.Instance.OpenEntityRecord('MJ: Test Runs', CompositeKey.FromID(run.id));
    }
    RerunTest(run) {
        if (!run.testId)
            return;
        this.testingDialogService.OpenTestPanel(run.testId);
    }
    async SubmitFeedback() {
        if (!this.SelectedRun)
            return;
        this.IsSubmittingFeedback = true;
        this.cdr.markForCheck();
        const success = await this.instrumentationService.submitFeedback(this.SelectedRun.id, this.feedbackRating, this.feedbackIsCorrect === true, this.feedbackComments);
        this.IsSubmittingFeedback = false;
        if (success) {
            // Update the selected run to reflect feedback was submitted
            this.SelectedRun = {
                ...this.SelectedRun,
                hasHumanFeedback: true,
                humanRating: this.feedbackRating,
                humanIsCorrect: this.feedbackIsCorrect,
                humanComments: this.feedbackComments
            };
        }
        this.cdr.markForCheck();
    }
    OnFeedbackCommentInput(event) {
        const textarea = event.target;
        this.feedbackComments = textarea.value;
    }
    TrackByRunId(_index, run) {
        return run.id;
    }
    // ------- Formatting Helpers -------
    FormatDuration(milliseconds) {
        if (milliseconds < 1000)
            return `${Math.round(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`;
    }
    FormatRelativeTime(date) {
        const now = Date.now();
        const then = date instanceof Date ? date.getTime() : new Date(date).getTime();
        const diffMs = now - then;
        const diffMinutes = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        if (diffMinutes < 1)
            return 'Just now';
        if (diffMinutes < 60)
            return `${diffMinutes}m ago`;
        if (diffHours < 24)
            return `${diffHours}h ago`;
        return this.formatShortDate(date);
    }
    FormatDateTime(date) {
        const d = date instanceof Date ? date : new Date(date);
        return d.toLocaleString(undefined, {
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: '2-digit'
        });
    }
    FormatPercent(value) {
        return `${Math.round(value)}%`;
    }
    FormatCostTotal(cost) {
        if (cost < 0.01)
            return '$0.00';
        if (cost < 1)
            return `$${cost.toFixed(2)}`;
        return `$${cost.toFixed(2)}`;
    }
    // ------- Private Methods -------
    setupObservables() {
        const data$ = this.instrumentationService.testRunsWithFeedback$.pipe(takeUntil(this.destroy$));
        this.FilteredRuns$ = combineLatest([data$, this.filterTrigger$]).pipe(map(([runs]) => this.applyClientFilters(runs)), takeUntil(this.destroy$));
        this.FilteredStats$ = this.FilteredRuns$.pipe(map(runs => this.computeStats(runs)), takeUntil(this.destroy$));
    }
    applyClientFilters(runs) {
        let filtered = runs;
        filtered = this.filterByStatus(filtered);
        filtered = this.filterBySearch(filtered);
        filtered = this.sortRunsWithRunningFirst(filtered);
        return filtered;
    }
    filterByStatus(runs) {
        const status = this.filterState.status;
        if (status === 'all')
            return runs;
        const statusMap = {
            running: ['Running'],
            passed: ['Passed'],
            failed: ['Failed'],
            error: ['Error', 'Timeout']
        };
        const validStatuses = statusMap[status] ?? [];
        return runs.filter(r => validStatuses.includes(r.status));
    }
    filterBySearch(runs) {
        const text = this.filterState.searchText.toLowerCase().trim();
        if (!text)
            return runs;
        return runs.filter(r => r.testName.toLowerCase().includes(text));
    }
    sortRunsWithRunningFirst(runs) {
        return [...runs].sort((a, b) => {
            // Running tests at the top
            if (a.status === 'Running' && b.status !== 'Running')
                return -1;
            if (a.status !== 'Running' && b.status === 'Running')
                return 1;
            // Then by StartedAt DESC
            return b.runDateTime.getTime() - a.runDateTime.getTime();
        });
    }
    computeStats(runs) {
        const total = runs.length;
        if (total === 0) {
            return { totalRuns: 0, passRate: 0, avgDuration: 0, totalCost: 0 };
        }
        const passed = runs.filter(r => r.status === 'Passed').length;
        const passRate = (passed / total) * 100;
        const completedRuns = runs.filter(r => r.duration > 0 && r.status !== 'Running');
        const avgDuration = completedRuns.length > 0
            ? completedRuns.reduce((sum, r) => sum + r.duration, 0) / completedRuns.length
            : 0;
        const totalCost = runs.reduce((sum, r) => sum + r.cost, 0);
        return { totalRuns: total, passRate, avgDuration, totalCost };
    }
    updateServiceDateRange() {
        const now = new Date();
        let startDate;
        switch (this.filterState.timeRange) {
            case 'today':
                startDate = new Date(now);
                startDate.setHours(0, 0, 0, 0);
                break;
            case 'week':
                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                break;
            case 'month':
                startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
                break;
            case '90days':
                startDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
                break;
            default:
                startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
                break;
        }
        this.instrumentationService.setDateRange(startDate, now);
    }
    applyInitialState() {
        if (!this.initialState)
            return;
        const state = this.initialState;
        if (state['status'] && typeof state['status'] === 'string') {
            this.filterState.status = state['status'];
        }
        if (state['timeRange'] && typeof state['timeRange'] === 'string') {
            this.filterState.timeRange = state['timeRange'];
        }
        if (state['searchText'] && typeof state['searchText'] === 'string') {
            this.filterState.searchText = state['searchText'];
        }
    }
    emitStateChange() {
        this.stateChange.emit({
            status: this.filterState.status,
            timeRange: this.filterState.timeRange,
            searchText: this.filterState.searchText
        });
    }
    resetFeedbackForm() {
        this.feedbackRating = 5;
        this.feedbackIsCorrect = null;
        this.feedbackComments = '';
        this.IsSubmittingFeedback = false;
    }
    formatShortDate(date) {
        const d = date instanceof Date ? date : new Date(date);
        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
    }
    static ɵfac = function TestingRunsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingRunsComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i2.TestingDialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingRunsComponent, selectors: [["app-testing-runs"]], hostBindings: function TestingRunsComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("keydown.escape", function TestingRunsComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
        } }, inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 59, vars: 18, consts: [[1, "runs-container", 3, "keydown.escape"], [1, "page-header"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "header-actions"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-sync-alt"], [1, "btn", "btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "filter-bar"], [1, "filter-left"], [1, "filter-chips"], [1, "chip", 3, "active"], [1, "result-count"], [1, "filter-right"], [1, "time-select", 3, "change", "value"], ["value", "today"], ["value", "week"], ["value", "month"], ["value", "90days"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by test name...", 3, "input", "value"], [1, "clear-search"], [1, "stats-row"], [1, "runs-table-wrapper"], [1, "table-header"], [1, "col", "col-name"], [1, "col", "col-eval"], [1, "col", "col-score"], [1, "col", "col-duration"], [1, "col", "col-cost"], [1, "col", "col-time"], [1, "col", "col-actions"], [1, "table-loading"], [1, "table-empty"], [1, "chip", 3, "click"], [3, "class"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [1, "stat-card"], [1, "stat-icon", "total"], [1, "fa-solid", "fa-hashtag"], [1, "stat-body"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "pass"], [1, "fa-solid", "fa-check-circle"], [1, "stat-icon", "duration"], [1, "fa-solid", "fa-clock"], [1, "stat-icon", "cost"], [1, "fa-solid", "fa-dollar-sign"], ["text", "Loading test runs..."], [1, "fa-solid", "fa-inbox"], [1, "empty-hint"], [1, "table-row", 3, "is-running", "is-selected"], [1, "table-row", 3, "click"], [1, "test-name-link", 3, "click"], ["mode", "compact", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [3, "score", "showBar"], [3, "cost"], ["title", "View details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Re-run test", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "detail-overlay", 3, "click"], [1, "detail-panel"], [1, "detail-panel-header"], [1, "detail-title-section"], [3, "status"], [1, "close-btn", 3, "click"], [1, "detail-panel-body"], [1, "detail-metrics"], [1, "detail-metric"], [1, "dm-label"], [1, "dm-value"], [1, "detail-section"], [1, "fa-solid", "fa-clipboard-check"], ["mode", "expanded", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [1, "detail-section", "feedback-section"], [1, "fa-solid", "fa-comment-dots"], [1, "existing-feedback"], [1, "feedback-form"], [1, "fa-solid", "fa-server"], [1, "feedback-label"], [1, "feedback-value"], [1, "feedback-comments"], [1, "fa-solid", "fa-check", 2, "color", "#22c55e"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], [1, "rating-row"], [1, "rating-buttons"], [1, "rating-btn", 3, "selected"], [1, "correctness-row"], [1, "toggle-group"], [1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "comments-row"], ["rows", "3", "placeholder", "Optional feedback comments...", 3, "input", "value"], [1, "btn", "btn-primary", "submit-feedback-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "rating-btn", 3, "click"]], template: function TestingRunsComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("keydown.escape", function TestingRunsComponent_Template_div_keydown_escape_0_listener() { return ctx.CloseDetailPanel(); });
            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
            i0.ɵɵelement(3, "i", 3);
            i0.ɵɵelementStart(4, "h2");
            i0.ɵɵtext(5, "Test Runs");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 4)(7, "button", 5);
            i0.ɵɵlistener("click", function TestingRunsComponent_Template_button_click_7_listener() { return ctx.Refresh(); });
            i0.ɵɵelement(8, "i", 6);
            i0.ɵɵtext(9, " Refresh ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(10, "button", 7);
            i0.ɵɵlistener("click", function TestingRunsComponent_Template_button_click_10_listener() { return ctx.StartNewTest(); });
            i0.ɵɵelement(11, "i", 8);
            i0.ɵɵtext(12, " Run Test ");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11);
            i0.ɵɵrepeaterCreate(16, TestingRunsComponent_For_17_Template, 3, 5, "button", 12, _forTrack0);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "span", 13);
            i0.ɵɵtext(19);
            i0.ɵɵpipe(20, "async");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(21, "div", 14)(22, "select", 15);
            i0.ɵɵlistener("change", function TestingRunsComponent_Template_select_change_22_listener($event) { return ctx.OnTimeRangeChange($event); });
            i0.ɵɵelementStart(23, "option", 16);
            i0.ɵɵtext(24, "Today");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(25, "option", 17);
            i0.ɵɵtext(26, "This Week");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(27, "option", 18);
            i0.ɵɵtext(28, "This Month");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(29, "option", 19);
            i0.ɵɵtext(30, "Last 90 Days");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(31, "div", 20);
            i0.ɵɵelement(32, "i", 21);
            i0.ɵɵelementStart(33, "input", 22);
            i0.ɵɵlistener("input", function TestingRunsComponent_Template_input_input_33_listener($event) { return ctx.OnSearchInput($event); });
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(34, TestingRunsComponent_Conditional_34_Template, 2, 0, "button", 23);
            i0.ɵɵelementEnd()()();
            i0.ɵɵconditionalCreate(35, TestingRunsComponent_Conditional_35_Template, 33, 4, "div", 24);
            i0.ɵɵpipe(36, "async");
            i0.ɵɵelementStart(37, "div", 25)(38, "div", 26)(39, "div", 27);
            i0.ɵɵtext(40, "Test Name");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(41, "div", 28);
            i0.ɵɵtext(42, "Evaluation");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(43, "div", 29);
            i0.ɵɵtext(44, "Score");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(45, "div", 30);
            i0.ɵɵtext(46, "Duration");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(47, "div", 31);
            i0.ɵɵtext(48, "Cost");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(49, "div", 32);
            i0.ɵɵtext(50, "Started");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(51, "div", 33);
            i0.ɵɵtext(52, "Actions");
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(53, TestingRunsComponent_Conditional_53_Template, 2, 0, "div", 34);
            i0.ɵɵpipe(54, "async");
            i0.ɵɵpipe(55, "async");
            i0.ɵɵconditionalBranchCreate(56, TestingRunsComponent_Conditional_56_Template, 6, 0, "div", 35)(57, TestingRunsComponent_Conditional_57_Template, 3, 2);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(58, TestingRunsComponent_Conditional_58_Template, 41, 19);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            let tmp_3_0;
            let tmp_7_0;
            let tmp_8_0;
            i0.ɵɵadvance(7);
            i0.ɵɵproperty("disabled", ctx.IsRefreshing);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("spinning", ctx.IsRefreshing);
            i0.ɵɵadvance(8);
            i0.ɵɵrepeater(ctx.StatusChips);
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate1("", ((tmp_3_0 = i0.ɵɵpipeBind1(20, 10, ctx.FilteredRuns$)) == null ? null : tmp_3_0.length) ?? 0, " results");
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("value", ctx.filterState.timeRange);
            i0.ɵɵadvance(11);
            i0.ɵɵproperty("value", ctx.filterState.searchText);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.filterState.searchText ? 34 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional((tmp_7_0 = i0.ɵɵpipeBind1(36, 12, ctx.FilteredStats$)) ? 35 : -1, tmp_7_0);
            i0.ɵɵadvance(18);
            i0.ɵɵconditional(i0.ɵɵpipeBind1(54, 14, ctx.instrumentationService.isLoading$) ? 53 : ((tmp_8_0 = i0.ɵɵpipeBind1(55, 16, ctx.FilteredRuns$)) == null ? null : tmp_8_0.length) === 0 ? 56 : 57);
            i0.ɵɵadvance(5);
            i0.ɵɵconditional(ctx.SelectedRun ? 58 : -1);
        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i2.TestStatusBadgeComponent, i2.ScoreIndicatorComponent, i2.CostDisplayComponent, i2.EvaluationBadgeComponent, i2.ExecutionContextComponent, i4.LoadingComponent, i5.AsyncPipe], styles: ["\n\n\n\n\n    .runs-container[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    \n\n    .page-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 10px;\n    }\n\n    \n\n    .btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    \n\n    .filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .chip[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"][_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"][_ngcontent-%COMP%] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search[_ngcontent-%COMP%] {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    \n\n    .stats-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon[_ngcontent-%COMP%] {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .stat-value[_ngcontent-%COMP%] {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    \n\n    .runs-table-wrapper[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running[_ngcontent-%COMP%]   .test-name-link[_ngcontent-%COMP%]::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: _ngcontent-%COMP%_pulse-dot 1.5s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions[_ngcontent-%COMP%] {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    \n\n    .table-loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty[_ngcontent-%COMP%] {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .detail-overlay[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    \n\n    .detail-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: _ngcontent-%COMP%_slideIn 0.25s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric[_ngcontent-%COMP%] {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    \n\n    .existing-feedback[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value[_ngcontent-%COMP%] {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments[_ngcontent-%COMP%] {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn[_ngcontent-%COMP%] {\n      align-self: flex-start;\n    }\n\n    \n\n    @media (max-width: 1400px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left[_ngcontent-%COMP%], .filter-right[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .table-header[_ngcontent-%COMP%], .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval[_ngcontent-%COMP%], .col-time[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel[_ngcontent-%COMP%] {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .table-header[_ngcontent-%COMP%], .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 80px 60px;\n      }\n\n      .col-score[_ngcontent-%COMP%], .col-duration[_ngcontent-%COMP%] {\n        display: none;\n      }\n\n      .chip[_ngcontent-%COMP%] {\n        min-height: 44px;\n        padding: 8px 14px;\n      }\n\n      .table-row[_ngcontent-%COMP%] {\n        min-height: 44px;\n      }\n    }"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingRunsComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-testing-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: `
    <!-- Page Header -->
    <div class="runs-container" (keydown.escape)="CloseDetailPanel()">
      <div class="page-header">
        <div class="header-title">
          <i class="fa-solid fa-list-check"></i>
          <h2>Test Runs</h2>
        </div>
        <div class="header-actions">
          <button class="btn btn-secondary" (click)="Refresh()" [disabled]="IsRefreshing">
            <i class="fa-solid fa-sync-alt" [class.spinning]="IsRefreshing"></i>
            Refresh
          </button>
          <button class="btn btn-primary" (click)="StartNewTest()">
            <i class="fa-solid fa-play"></i>
            Run Test
          </button>
        </div>
      </div>

      <!-- Filter Bar -->
      <div class="filter-bar">
        <div class="filter-left">
          <div class="filter-chips">
            @for (chip of StatusChips; track chip.value) {
              <button
                class="chip"
                [class.active]="filterState.status === chip.value"
                [attr.data-status]="chip.value"
                (click)="SetStatusFilter(chip.value)"
              >
                @if (chip.icon) {
                  <i [class]="chip.icon"></i>
                }
                {{ chip.label }}
              </button>
            }
          </div>
          <span class="result-count">{{ (FilteredRuns$ | async)?.length ?? 0 }} results</span>
        </div>
        <div class="filter-right">
          <select
            class="time-select"
            [value]="filterState.timeRange"
            (change)="OnTimeRangeChange($event)"
          >
            <option value="today">Today</option>
            <option value="week">This Week</option>
            <option value="month">This Month</option>
            <option value="90days">Last 90 Days</option>
          </select>
          <div class="search-box">
            <i class="fa-solid fa-search"></i>
            <input
              type="text"
              placeholder="Search by test name..."
              [value]="filterState.searchText"
              (input)="OnSearchInput($event)"
            />
            @if (filterState.searchText) {
              <button class="clear-search" (click)="ClearSearch()">
                <i class="fa-solid fa-times"></i>
              </button>
            }
          </div>
        </div>
      </div>

      <!-- Summary Stats Row -->
      @if (FilteredStats$ | async; as stats) {
        <div class="stats-row">
          <div class="stat-card">
            <div class="stat-icon total"><i class="fa-solid fa-hashtag"></i></div>
            <div class="stat-body">
              <div class="stat-value">{{ stats.totalRuns }}</div>
              <div class="stat-label">Total Runs</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon pass"><i class="fa-solid fa-check-circle"></i></div>
            <div class="stat-body">
              <div class="stat-value">{{ FormatPercent(stats.passRate) }}</div>
              <div class="stat-label">Pass Rate</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon duration"><i class="fa-solid fa-clock"></i></div>
            <div class="stat-body">
              <div class="stat-value">{{ FormatDuration(stats.avgDuration) }}</div>
              <div class="stat-label">Avg Duration</div>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon cost"><i class="fa-solid fa-dollar-sign"></i></div>
            <div class="stat-body">
              <div class="stat-value">{{ FormatCostTotal(stats.totalCost) }}</div>
              <div class="stat-label">Total Cost</div>
            </div>
          </div>
        </div>
      }

      <!-- Runs Table -->
      <div class="runs-table-wrapper">
        <div class="table-header">
          <div class="col col-name">Test Name</div>
          <div class="col col-eval">Evaluation</div>
          <div class="col col-score">Score</div>
          <div class="col col-duration">Duration</div>
          <div class="col col-cost">Cost</div>
          <div class="col col-time">Started</div>
          <div class="col col-actions">Actions</div>
        </div>

        @if (instrumentationService.isLoading$ | async) {
          <div class="table-loading">
            <mj-loading text="Loading test runs..."></mj-loading>
          </div>
        } @else if ((FilteredRuns$ | async)?.length === 0) {
          <div class="table-empty">
            <i class="fa-solid fa-inbox"></i>
            <p>No test runs found</p>
            <span class="empty-hint">Try adjusting your filters or run a new test.</span>
          </div>
        } @else {
          @for (run of FilteredRuns$ | async; track TrackByRunId($index, run)) {
            <div
              class="table-row"
              [class.is-running]="run.status === 'Running'"
              [class.is-selected]="SelectedRun?.id === run.id"
              (click)="SelectRun(run)"
            >
              <div class="col col-name">
                <span class="test-name-link" (click)="NavigateToTest(run, $event)">
                  {{ run.testName }}
                </span>
              </div>
              <div class="col col-eval">
                <app-evaluation-badge
                  [executionStatus]="run.status"
                  [originalStatus]="run.status"
                  [autoScore]="run.score"
                  [passedChecks]="run.passedChecks"
                  [failedChecks]="run.failedChecks"
                  [totalChecks]="run.totalChecks"
                  [humanRating]="run.humanRating"
                  [humanIsCorrect]="run.humanIsCorrect"
                  [hasHumanFeedback]="run.hasHumanFeedback"
                  [preferences]="EvalPreferences"
                  mode="compact"
                ></app-evaluation-badge>
              </div>
              <div class="col col-score">
                <app-score-indicator [score]="run.score" [showBar]="true"></app-score-indicator>
              </div>
              <div class="col col-duration">{{ FormatDuration(run.duration) }}</div>
              <div class="col col-cost">
                <app-cost-display [cost]="run.cost"></app-cost-display>
              </div>
              <div class="col col-time">{{ FormatRelativeTime(run.runDateTime) }}</div>
              <div class="col col-actions">
                <button class="icon-btn" title="View details" (click)="SelectRun(run); $event.stopPropagation()">
                  <i class="fa-solid fa-eye"></i>
                </button>
                <button class="icon-btn" title="Re-run test" (click)="RerunTest(run); $event.stopPropagation()">
                  <i class="fa-solid fa-rotate-right"></i>
                </button>
              </div>
            </div>
          }
        }
      </div>

      <!-- Detail Panel (slide-in) -->
      @if (SelectedRun) {
        <div class="detail-overlay" (click)="CloseDetailPanel()"></div>
        <div class="detail-panel">
          <div class="detail-panel-header">
            <div class="detail-title-section">
              <h3>{{ SelectedRun.testName }}</h3>
              <app-test-status-badge [status]="SelectedRun.status"></app-test-status-badge>
            </div>
            <button class="close-btn" (click)="CloseDetailPanel()">
              <i class="fa-solid fa-times"></i>
            </button>
          </div>

          <div class="detail-panel-body">
            <!-- Metrics row -->
            <div class="detail-metrics">
              <div class="detail-metric">
                <span class="dm-label">Score</span>
                <app-score-indicator [score]="SelectedRun.score" [showBar]="true"></app-score-indicator>
              </div>
              <div class="detail-metric">
                <span class="dm-label">Duration</span>
                <span class="dm-value">{{ FormatDuration(SelectedRun.duration) }}</span>
              </div>
              <div class="detail-metric">
                <span class="dm-label">Cost</span>
                <app-cost-display [cost]="SelectedRun.cost"></app-cost-display>
              </div>
              <div class="detail-metric">
                <span class="dm-label">Started</span>
                <span class="dm-value">{{ FormatDateTime(SelectedRun.runDateTime) }}</span>
              </div>
            </div>

            <!-- Evaluation Badge (expanded) -->
            <div class="detail-section">
              <h4><i class="fa-solid fa-clipboard-check"></i> Evaluation</h4>
              <app-evaluation-badge
                [executionStatus]="SelectedRun.status"
                [originalStatus]="SelectedRun.status"
                [autoScore]="SelectedRun.score"
                [passedChecks]="SelectedRun.passedChecks"
                [failedChecks]="SelectedRun.failedChecks"
                [totalChecks]="SelectedRun.totalChecks"
                [humanRating]="SelectedRun.humanRating"
                [humanIsCorrect]="SelectedRun.humanIsCorrect"
                [hasHumanFeedback]="SelectedRun.hasHumanFeedback"
                [preferences]="EvalPreferences"
                mode="expanded"
              ></app-evaluation-badge>
            </div>

            <!-- Execution Context -->
            @if (SelectedRun.targetType) {
              <div class="detail-section">
                <h4><i class="fa-solid fa-server"></i> Execution Context</h4>
                <mj-execution-context></mj-execution-context>
              </div>
            }

            <!-- Inline Feedback Form -->
            <div class="detail-section feedback-section">
              <h4><i class="fa-solid fa-comment-dots"></i> Human Feedback</h4>
              @if (SelectedRun.hasHumanFeedback) {
                <div class="existing-feedback">
                  <span class="feedback-label">Rating:</span>
                  <span class="feedback-value">{{ SelectedRun.humanRating }}/10</span>
                  <span class="feedback-label">Correct:</span>
                  <span class="feedback-value">
                    @if (SelectedRun.humanIsCorrect === true) {
                      <i class="fa-solid fa-check" style="color: #22c55e"></i> Yes
                    } @else if (SelectedRun.humanIsCorrect === false) {
                      <i class="fa-solid fa-times" style="color: #ef4444"></i> No
                    } @else {
                      --
                    }
                  </span>
                  @if (SelectedRun.humanComments) {
                    <div class="feedback-comments">{{ SelectedRun.humanComments }}</div>
                  }
                </div>
              } @else {
                <div class="feedback-form">
                  <div class="rating-row">
                    <label>Rating</label>
                    <div class="rating-buttons">
                      @for (n of RatingValues; track n) {
                        <button
                          class="rating-btn"
                          [class.selected]="feedbackRating === n"
                          (click)="feedbackRating = n"
                        >
                          {{ n }}
                        </button>
                      }
                    </div>
                  </div>
                  <div class="correctness-row">
                    <label>Is the result correct?</label>
                    <div class="toggle-group">
                      <button
                        class="toggle-btn"
                        [class.active]="feedbackIsCorrect === true"
                        (click)="feedbackIsCorrect = true"
                      >
                        <i class="fa-solid fa-check"></i> Yes
                      </button>
                      <button
                        class="toggle-btn"
                        [class.active]="feedbackIsCorrect === false"
                        (click)="feedbackIsCorrect = false"
                      >
                        <i class="fa-solid fa-times"></i> No
                      </button>
                    </div>
                  </div>
                  <div class="comments-row">
                    <label>Comments</label>
                    <textarea
                      rows="3"
                      placeholder="Optional feedback comments..."
                      [value]="feedbackComments"
                      (input)="OnFeedbackCommentInput($event)"
                    ></textarea>
                  </div>
                  <button
                    class="btn btn-primary submit-feedback-btn"
                    (click)="SubmitFeedback()"
                    [disabled]="IsSubmittingFeedback"
                  >
                    <i class="fa-solid fa-paper-plane"></i>
                    {{ IsSubmittingFeedback ? 'Submitting...' : 'Submit Feedback' }}
                  </button>
                </div>
              }
            </div>
          </div>
        </div>
      }
    </div>
  `, styles: ["\n    /* ==========================================\n       Testing Runs Component\n       ========================================== */\n\n    .runs-container {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      position: relative;\n    }\n\n    /* Page Header */\n    .page-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 22px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 10px;\n    }\n\n    /* Buttons */\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .btn-secondary {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    /* Filter Bar */\n    .filter-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 14px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .filter-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .filter-chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .chip:hover {\n      background: var(--mj-border-default);\n    }\n\n    .chip.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"running\"] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .chip.active[data-status=\"passed\"] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n    }\n\n    .chip.active[data-status=\"failed\"] {\n      background: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    .chip.active[data-status=\"error\"] {\n      background: var(--mj-status-warning);\n      border-color: var(--mj-status-warning);\n    }\n\n    .result-count {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .filter-right {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .time-select {\n      padding: 8px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      background: var(--mj-bg-surface);\n      cursor: pointer;\n    }\n\n    .time-select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .search-box {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 14px;\n      background: var(--mj-bg-surface-card);\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      min-width: 220px;\n      transition: border-color 0.2s ease;\n    }\n\n    .search-box:focus-within {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .search-box i {\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-box input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .search-box input::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .clear-search {\n      border: none;\n      background: transparent;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px 4px;\n      border-radius: 4px;\n    }\n\n    .clear-search:hover {\n      color: var(--mj-text-muted);\n      background: var(--mj-border-default);\n    }\n\n    /* Stats Row */\n    .stats-row {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 14px;\n      margin-bottom: 20px;\n    }\n\n    .stat-card {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      padding: 16px 20px;\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .stat-icon {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n    }\n\n    .stat-icon.total { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.pass { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--mj-status-success); }\n    .stat-icon.duration { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n    .stat-icon.cost { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--mj-status-warning); }\n\n    .stat-body {\n      flex: 1;\n    }\n\n    .stat-value {\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.1;\n    }\n\n    .stat-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-top: 2px;\n    }\n\n    /* Runs Table */\n    .runs-table-wrapper {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 2fr 140px 120px 100px 100px 120px 90px;\n      gap: 12px;\n      padding: 14px 24px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.15s ease;\n      align-items: center;\n    }\n\n    .table-row:last-child {\n      border-bottom: none;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-row.is-selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .table-row.is-running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .table-row.is-running .test-name-link::after {\n      content: '';\n      display: inline-block;\n      width: 8px;\n      height: 8px;\n      background: var(--mj-brand-primary);\n      border-radius: 50%;\n      margin-left: 8px;\n      animation: pulse-dot 1.5s infinite;\n    }\n\n    @keyframes pulse-dot {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.3; }\n    }\n\n    .col {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      overflow: hidden;\n    }\n\n    .test-name-link {\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .test-name-link:hover {\n      color: var(--mj-brand-primary);\n      text-decoration: underline;\n    }\n\n    .col-actions {\n      gap: 6px;\n      justify-content: flex-end;\n    }\n\n    .icon-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 8px;\n      font-size: 13px;\n      transition: all 0.2s ease;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    /* Table states */\n    .table-loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n    }\n\n    .table-empty {\n      padding: 80px 40px;\n      text-align: center;\n    }\n\n    .table-empty i {\n      font-size: 48px;\n      color: var(--mj-border-strong);\n      margin-bottom: 16px;\n    }\n\n    .table-empty p {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      margin: 0 0 8px 0;\n    }\n\n    .empty-hint {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Detail Panel Overlay */\n    .detail-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: var(--mj-bg-overlay);\n      z-index: 999;\n    }\n\n    /* Detail Panel */\n    .detail-panel {\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      width: 520px;\n      max-width: 90vw;\n      background: var(--mj-bg-surface);\n      box-shadow: var(--mj-shadow-lg);\n      z-index: 1000;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.25s ease-out;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n\n    .detail-panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 20px 24px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-card);\n    }\n\n    .detail-title-section {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .detail-title-section h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .close-btn {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-left: 12px;\n      transition: all 0.15s ease;\n    }\n\n    .close-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .detail-panel-body {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .detail-metrics {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-bottom: 24px;\n    }\n\n    .detail-metric {\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n    }\n\n    .dm-label {\n      display: block;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--mj-text-disabled);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .dm-value {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-section {\n      margin-bottom: 24px;\n    }\n\n    .detail-section h4 {\n      font-size: 13px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      margin: 0 0 12px 0;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .detail-section h4 i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    /* Feedback Section */\n    .existing-feedback {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px 16px;\n      align-items: center;\n      padding: 14px;\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      border-radius: 8px;\n      font-size: 13px;\n    }\n\n    .feedback-label {\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .feedback-value {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .feedback-comments {\n      width: 100%;\n      margin-top: 8px;\n      padding-top: 8px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-bg-surface));\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      font-style: italic;\n    }\n\n    .feedback-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .feedback-form label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .rating-buttons {\n      display: flex;\n      gap: 4px;\n    }\n\n    .rating-btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .rating-btn:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .rating-btn.selected {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .toggle-group {\n      display: flex;\n      gap: 8px;\n    }\n\n    .toggle-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: 2px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .toggle-btn.active {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea {\n      width: 100%;\n      padding: 10px 12px;\n      border: 2px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      font-family: inherit;\n      color: var(--mj-text-secondary);\n      resize: vertical;\n      box-sizing: border-box;\n    }\n\n    .comments-row textarea:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n    }\n\n    .comments-row textarea::placeholder {\n      color: var(--mj-text-disabled);\n    }\n\n    .submit-feedback-btn {\n      align-self: flex-start;\n    }\n\n    /* Responsive */\n    @media (max-width: 1400px) {\n      .stats-row {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-left, .filter-right {\n        justify-content: center;\n      }\n\n      .table-header, .table-row {\n        grid-template-columns: 2fr 120px 100px 100px 80px;\n      }\n\n      .col-eval, .col-time {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .stats-row {\n        grid-template-columns: 1fr;\n      }\n\n      .detail-panel {\n        width: 100vw;\n        max-width: 100vw;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .table-header, .table-row {\n        grid-template-columns: 1fr 80px 60px;\n      }\n\n      .col-score, .col-duration {\n        display: none;\n      }\n\n      .chip {\n        min-height: 44px;\n        padding: 8px 14px;\n      }\n\n      .table-row {\n        min-height: 44px;\n      }\n    }\n  "] }]
    }], () => [{ type: i1.TestingInstrumentationService }, { type: i2.TestingDialogService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }], { initialState: [{
            type: Input
        }], stateChange: [{
            type: Output
        }], OnEscapeKey: [{
            type: HostListener,
            args: ['document:keydown.escape']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsComponent, { className: "TestingRunsComponent", filePath: "src/Testing/components/testing-runs.component.ts", lineNumber: 1123 }); })();
//# sourceMappingURL=testing-runs.component.js.map