@memberjunction/ng-core-entity-forms 2.129.0 → 2.130.1

package/dist/lib/custom/Tests/test-form.component.js

@@ -4,13 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostListener } from '@angular/core';
 import { Subject } from 'rxjs';
-import { CompositeKey, RunView } from '@memberjunction/core';
+import { takeUntil } from 'rxjs/operators';
+import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { RegisterClass } from '@memberjunction/global';
 import { SharedService } from '@memberjunction/ng-shared';
 import { TestFormComponent } from '../../generated/Entities/Test/test.form.component';
+import { TagsHelper } from '@memberjunction/ng-testing';
+import { createCopyOnlyToolbar } from '@memberjunction/ng-code-editor';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
@@ -19,8 +23,23 @@ import * as i4 from "@angular/common";
 import * as i5 from "@angular/forms";
 import * as i6 from "@progress/kendo-angular-dialog";
 import * as i7 from "@progress/kendo-angular-buttons";
-function TestFormComponentExtended_div_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "p");
+import * as i8 from "@memberjunction/ng-code-editor";
+import * as i9 from "@memberjunction/ng-shared-generic";
+import * as i10 from "./entity-link-pill.component";
+const _c0 = () => [1, 2, 3, 4, 5];
+const _c1 = () => [1, 2, 3];
+function TestFormComponentExtended_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Type, " ");
+} }
+function TestFormComponentExtended_div_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "p");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -28,30 +47,33 @@ function TestFormComponentExtended_div_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.record.Description);
 } }
-function TestFormComponentExtended_div_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31)(2, "div", 32);
+function TestFormComponentExtended_div_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39)(2, "div", 40);
     i0.ɵɵtext(3, "Total Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 33);
+    i0.ɵɵelementStart(4, "div", 41);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 31)(7, "div", 32);
+    i0.ɵɵelementStart(6, "div", 39)(7, "div", 40);
     i0.ɵɵtext(8, "Pass Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 33);
+    i0.ɵɵelementStart(9, "div", 41);
     i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 42);
+    i0.ɵɵelement(12, "div", 43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 31)(12, "div", 32);
-    i0.ɵɵtext(13, "Avg Cost");
+    i0.ɵɵelementStart(13, "div", 39)(14, "div", 40);
+    i0.ɵɵtext(15, "Avg Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 33);
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(16, "div", 41);
+    i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 31)(17, "div", 32);
-    i0.ɵɵtext(18, "Avg Duration");
+    i0.ɵɵelementStart(18, "div", 39)(19, "div", 40);
+    i0.ɵɵtext(20, "Avg Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 33);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(21, "div", 41);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -59,13 +81,15 @@ function TestFormComponentExtended_div_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r0.testRuns.length);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("", ctx_r0.getPassRate().toFixed(1), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r0.getPassRate(), "%");
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.formatCost(ctx_r0.getAverageCost()));
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.formatDuration(ctx_r0.getAverageDuration()));
 } }
-function TestFormComponentExtended_span_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function TestFormComponentExtended_span_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -73,8 +97,8 @@ function TestFormComponentExtended_span_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.testRuns.length);
 } }
-function TestFormComponentExtended_span_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function TestFormComponentExtended_span_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 44);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -82,90 +106,110 @@ function TestFormComponentExtended_span_41_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.suiteTests.length);
 } }
-function TestFormComponentExtended_div_43_Template(rf, ctx) { if (rf & 1) {
+function TestFormComponentExtended_div_49_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 36)(2, "h3");
-    i0.ɵɵtext(3, "Test Information");
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46)(2, "h3");
+    i0.ɵɵelement(3, "i", 47);
+    i0.ɵɵtext(4, " Test Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 37)(5, "div", 38)(6, "div", 39);
-    i0.ɵɵtext(7, "Name");
+    i0.ɵɵelementStart(5, "div", 48)(6, "div", 49)(7, "div", 50);
+    i0.ɵɵtext(8, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 40);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(9, "div", 51);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 38)(11, "div", 39);
-    i0.ɵɵtext(12, "Type");
+    i0.ɵɵelementStart(11, "div", 49)(12, "div", 50);
+    i0.ɵɵtext(13, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 40);
-    i0.ɵɵtext(14);
+    i0.ɵɵelementStart(14, "div", 51);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 38)(16, "div", 39);
-    i0.ɵɵtext(17, "Status");
+    i0.ɵɵelementStart(16, "div", 49)(17, "div", 50);
+    i0.ɵɵtext(18, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 40);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(19, "div", 51)(20, "span", 52);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 49)(23, "div", 50);
+    i0.ɵɵtext(24, "Priority");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 51);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 38)(21, "div", 39);
-    i0.ɵɵtext(22, "Priority");
+    i0.ɵɵelementStart(27, "div", 49)(28, "div", 50);
+    i0.ɵɵtext(29, "Estimated Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 40);
-    i0.ɵɵtext(24);
+    i0.ɵɵelementStart(30, "div", 51);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "div", 49)(33, "div", 50);
+    i0.ɵɵtext(34, "Estimated Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "div", 51);
+    i0.ɵɵtext(36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 38)(26, "div", 39);
-    i0.ɵɵtext(27, "Estimated Duration");
+    i0.ɵɵelementStart(37, "div", 49)(38, "div", 50);
+    i0.ɵɵtext(39, "Repeat Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 40);
-    i0.ɵɵtext(29);
+    i0.ɵɵelementStart(40, "div", 51);
+    i0.ɵɵtext(41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 38)(31, "div", 39);
-    i0.ɵɵtext(32, "Estimated Cost");
+    i0.ɵɵelementStart(42, "div", 49)(43, "div", 50);
+    i0.ɵɵtext(44, "Max Execution Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div", 40);
-    i0.ɵɵtext(34);
+    i0.ɵɵelementStart(45, "div", 51);
+    i0.ɵɵtext(46);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 38)(36, "div", 39);
-    i0.ɵɵtext(37, "Repeat Count");
+    i0.ɵɵelementStart(47, "div", 49)(48, "div", 50);
+    i0.ɵɵtext(49, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "div", 40);
-    i0.ɵɵtext(39);
+    i0.ɵɵelementStart(50, "div", 51);
+    i0.ɵɵtext(51);
+    i0.ɵɵpipe(52, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(40, "div", 38)(41, "div", 39);
-    i0.ɵɵtext(42, "Created");
+    i0.ɵɵelementStart(53, "div", 49)(54, "div", 50);
+    i0.ɵɵtext(55, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "div", 40);
-    i0.ɵɵtext(44);
-    i0.ɵɵpipe(45, "date");
+    i0.ɵɵelementStart(56, "div", 51);
+    i0.ɵɵtext(57);
+    i0.ɵɵpipe(58, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(46, "div", 41)(47, "h3");
-    i0.ɵɵtext(48, "Test Definition");
+    i0.ɵɵelementStart(59, "div", 53)(60, "h3");
+    i0.ɵɵelement(61, "i", 54);
+    i0.ɵɵtext(62, " Test Definition");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "div", 42)(50, "button", 43);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_43_Template_button_click_50_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("input")); });
-    i0.ɵɵtext(51, " Input Definition ");
+    i0.ɵɵelementStart(63, "div", 55)(64, "button", 56);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_49_Template_button_click_64_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("input")); });
+    i0.ɵɵelement(65, "i", 57);
+    i0.ɵɵtext(66, " Input Definition ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "button", 43);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_43_Template_button_click_52_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("expected")); });
-    i0.ɵɵtext(53, " Expected Outcomes ");
+    i0.ɵɵelementStart(67, "button", 56);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_49_Template_button_click_67_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("expected")); });
+    i0.ɵɵelement(68, "i", 58);
+    i0.ɵɵtext(69, " Expected Outcomes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "button", 43);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_43_Template_button_click_54_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("config")); });
-    i0.ɵɵtext(55, " Configuration ");
+    i0.ɵɵelementStart(70, "button", 56);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_49_Template_button_click_70_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("config")); });
+    i0.ɵɵelement(71, "i", 59);
+    i0.ɵɵtext(72, " Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "button", 43);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_43_Template_button_click_56_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("tags")); });
-    i0.ɵɵtext(57, " Tags ");
+    i0.ɵɵelementStart(73, "button", 56);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_49_Template_button_click_73_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setJsonView("tags")); });
+    i0.ɵɵelement(74, "i", 60);
+    i0.ɵɵtext(75, " Tags ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(58, "div", 44)(59, "pre");
-    i0.ɵɵtext(60);
-    i0.ɵɵpipe(61, "json");
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(76, "div", 61);
+    i0.ɵɵelement(77, "mj-code-editor", 62);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
+    i0.ɵɵadvance(10);
     i0.ɵɵtextInterpolate(ctx_r0.record.Name);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.record.Type);
+    i0.ɵɵtextInterpolate(ctx_r0.record.Type || "N/A");
     i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngClass", ctx_r0.getStatusClass());
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.record.Status);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.record.Priority || "N/A");
@@ -176,74 +220,92 @@ function TestFormComponentExtended_div_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.record.RepeatCount || 1);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(45, 17, ctx_r0.record.__mj_CreatedAt, "medium"));
+    i0.ɵɵtextInterpolate(ctx_r0.formatTimeout(ctx_r0.record.MaxExecutionTimeMS));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(52, 23, ctx_r0.record.__mj_CreatedAt, "medium"));
     i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(58, 26, ctx_r0.record.__mj_UpdatedAt, "medium"));
+    i0.ɵɵadvance(7);
     i0.ɵɵclassProp("active", ctx_r0.activeJsonView === "input");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r0.activeJsonView === "expected");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r0.activeJsonView === "config");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r0.activeJsonView === "tags");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(61, 20, ctx_r0.getJsonData()));
+    i0.ɵɵproperty("value", ctx_r0.getJsonData())("readonly", true)("toolbar", ctx_r0.jsonToolbar)("lineWrapping", true);
 } }
-function TestFormComponentExtended_div_44_Template(rf, ctx) { if (rf & 1) {
+function TestFormComponentExtended_div_50_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46)(2, "h3");
-    i0.ɵɵtext(3, "Execution Settings");
+    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64)(2, "h3");
+    i0.ɵɵelement(3, "i", 65);
+    i0.ɵɵtext(4, " Execution Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 47)(5, "div", 48)(6, "label");
-    i0.ɵɵtext(7, "Priority");
+    i0.ɵɵelementStart(5, "div", 66)(6, "div", 67)(7, "label");
+    i0.ɵɵtext(8, "Priority");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "input", 49);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Priority, $event) || (ctx_r0.record.Priority = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(9, "input", 68);
+    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_50_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Priority, $event) || (ctx_r0.record.Priority = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 48)(10, "label");
-    i0.ɵɵtext(11, "Repeat Count");
+    i0.ɵɵelementStart(10, "div", 67)(11, "label");
+    i0.ɵɵtext(12, "Repeat Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 49);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.RepeatCount, $event) || (ctx_r0.record.RepeatCount = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "input", 69);
+    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_50_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.RepeatCount, $event) || (ctx_r0.record.RepeatCount = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 48)(14, "label");
-    i0.ɵɵtext(15, "Estimated Duration (seconds)");
+    i0.ɵɵelementStart(14, "div", 67)(15, "label");
+    i0.ɵɵtext(16, "Estimated Duration (seconds)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "input", 49);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.EstimatedDurationSeconds, $event) || (ctx_r0.record.EstimatedDurationSeconds = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(17, "input", 70);
+    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_50_Template_input_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.EstimatedDurationSeconds, $event) || (ctx_r0.record.EstimatedDurationSeconds = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 48)(18, "label");
-    i0.ɵɵtext(19, "Estimated Cost (USD)");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "input", 50);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.EstimatedCostUSD, $event) || (ctx_r0.record.EstimatedCostUSD = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(21, "div", 46)(22, "h3");
-    i0.ɵɵtext(23, "Input Definition (JSON)");
+    i0.ɵɵelementStart(18, "div", 67)(19, "label");
+    i0.ɵɵtext(20, "Estimated Cost (USD)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "textarea", 51);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_textarea_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.InputDefinition, $event) || (ctx_r0.record.InputDefinition = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(21, "input", 71);
+    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_50_Template_input_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.EstimatedCostUSD, $event) || (ctx_r0.record.EstimatedCostUSD = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 46)(26, "h3");
-    i0.ɵɵtext(27, "Expected Outcomes (JSON)");
+    i0.ɵɵelementStart(22, "div", 72)(23, "label");
+    i0.ɵɵtext(24, "Max Execution Time (ms)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "textarea", 51);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_textarea_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.ExpectedOutcomes, $event) || (ctx_r0.record.ExpectedOutcomes = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div", 46)(30, "h3");
-    i0.ɵɵtext(31, "Configuration (JSON)");
+    i0.ɵɵelementStart(25, "input", 73);
+    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_50_Template_input_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.MaxExecutionTimeMS, $event) || (ctx_r0.record.MaxExecutionTimeMS = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "textarea", 51);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_textarea_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Configuration, $event) || (ctx_r0.record.Configuration = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 46)(34, "h3");
-    i0.ɵɵtext(35, "Tags (JSON Array)");
+    i0.ɵɵelementStart(26, "span", 74);
+    i0.ɵɵtext(27, "Leave empty for default 5 minute timeout");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(28, "div", 64)(29, "h3");
+    i0.ɵɵelement(30, "i", 57);
+    i0.ɵɵtext(31, " Input Definition (JSON)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "div", 75)(33, "mj-code-editor", 76);
+    i0.ɵɵlistener("change", function TestFormComponentExtended_div_50_Template_mj_code_editor_change_33_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.InputDefinition = $event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 64)(35, "h3");
+    i0.ɵɵelement(36, "i", 58);
+    i0.ɵɵtext(37, " Expected Outcomes (JSON)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "textarea", 52);
-    i0.ɵɵtwoWayListener("ngModelChange", function TestFormComponentExtended_div_44_Template_textarea_ngModelChange_36_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Tags, $event) || (ctx_r0.record.Tags = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(38, "div", 75)(39, "mj-code-editor", 76);
+    i0.ɵɵlistener("change", function TestFormComponentExtended_div_50_Template_mj_code_editor_change_39_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.ExpectedOutcomes = $event); });
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(40, "div", 64)(41, "h3");
+    i0.ɵɵelement(42, "i", 59);
+    i0.ɵɵtext(43, " Configuration (JSON)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "div", 75)(45, "mj-code-editor", 76);
+    i0.ɵɵlistener("change", function TestFormComponentExtended_div_50_Template_mj_code_editor_change_45_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.Configuration = $event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(46, "div", 64)(47, "h3");
+    i0.ɵɵelement(48, "i", 60);
+    i0.ɵɵtext(49, " Tags (JSON Array)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "div", 77)(51, "mj-code-editor", 76);
+    i0.ɵɵlistener("change", function TestFormComponentExtended_div_50_Template_mj_code_editor_change_51_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.record.Tags = $event); });
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
+    i0.ɵɵadvance(9);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Priority);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.RepeatCount);
@@ -252,186 +314,864 @@ function TestFormComponentExtended_div_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.EstimatedCostUSD);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.InputDefinition);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.ExpectedOutcomes);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Configuration);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Tags);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.MaxExecutionTimeMS);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("value", ctx_r0.record.InputDefinition || "")("readonly", false)("lineWrapping", true);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", ctx_r0.record.ExpectedOutcomes || "")("readonly", false)("lineWrapping", true);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", ctx_r0.record.Configuration || "")("readonly", false)("lineWrapping", true);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("value", ctx_r0.record.Tags || "[]")("readonly", false)("lineWrapping", true);
+} }
+function TestFormComponentExtended_div_51_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "div", 86);
+    i0.ɵɵelementStart(2, "div", 87);
+    i0.ɵɵelement(3, "div", 88)(4, "div", 89);
+    i0.ɵɵelementEnd()();
 } }
-function TestFormComponentExtended_div_45_div_1_div_1_span_13_Template(rf, ctx) { if (rf & 1) {
+function TestFormComponentExtended_div_51_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82)(1, "div", 83);
+    i0.ɵɵtemplate(2, TestFormComponentExtended_div_51_div_1_div_2_Template, 5, 0, "div", 84);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0));
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_span_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
+    i0.ɵɵelement(1, "i", 107);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const run_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(run_r5.DurationSeconds));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatDuration(run_r5.DurationSeconds), "");
 } }
-function TestFormComponentExtended_div_45_div_1_div_1_span_14_Template(rf, ctx) { if (rf & 1) {
+function TestFormComponentExtended_div_51_div_2_div_1_span_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1);
+    i0.ɵɵelement(1, "i", 108);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const run_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCost(run_r5.CostUSD), "");
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_mj_entity_link_pill_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-entity-link-pill", 109);
+} if (rf & 2) {
+    const run_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("entityName", run_r5.TargetLogEntity)("recordId", run_r5.TargetLogID);
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_span_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 110);
+    i0.ɵɵelement(1, "i", 94);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const run_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", "status-" + run_r5.Status.toLowerCase())("title", ctx_r0.getStatusTooltip(run_r5.Status));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.formatCost(run_r5.CostUSD));
+    i0.ɵɵclassProp("fa-check", run_r5.Status === "Passed")("fa-times", run_r5.Status === "Failed")("fa-exclamation", run_r5.Status === "Error")("fa-hourglass-end", run_r5.Status === "Timeout")("fa-forward", run_r5.Status === "Skipped")("fa-spinner", run_r5.Status === "Running")("fa-clock", run_r5.Status === "Pending");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(run_r5.Status);
 } }
-function TestFormComponentExtended_div_45_div_1_div_1_span_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 113);
+    i0.ɵɵelement(1, "i", 114);
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 115);
+    i0.ɵɵelement(1, "i", 116);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_11_0;
+    const rating_r6 = ctx.ngIf;
+    const run_r5 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("rating-low", rating_r6 <= 4)("rating-medium", rating_r6 >= 5 && rating_r6 <= 6)("rating-good", rating_r6 >= 7 && rating_r6 <= 8)("rating-excellent", rating_r6 >= 9);
+    i0.ɵɵproperty("title", ctx_r0.getHumanTooltip(rating_r6, ((tmp_11_0 = ctx_r0.getFeedbackForRun(run_r5.ID)) == null ? null : tmp_11_0.CorrectionSummary) || ((tmp_11_0 = ctx_r0.getFeedbackForRun(run_r5.ID)) == null ? null : tmp_11_0.Comments) || null));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(rating_r6);
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_span_1_Template, 2, 0, "span", 111)(2, TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_span_2_Template, 4, 10, "span", 112);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    let tmp_5_0;
+    let tmp_6_0;
+    const run_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !((tmp_5_0 = ctx_r0.getFeedbackForRun(run_r5.ID)) == null ? null : tmp_5_0.Rating));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (tmp_6_0 = ctx_r0.getFeedbackForRun(run_r5.ID)) == null ? null : tmp_6_0.Rating);
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 119);
+    i0.ɵɵelement(1, "i", 120);
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 121);
+    i0.ɵɵelement(1, "i", 120);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const run_r5 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassProp("score-low", run_r5.Score < 0.5)("score-medium", run_r5.Score >= 0.5 && run_r5.Score < 0.7)("score-good", run_r5.Score >= 0.7 && run_r5.Score < 0.85)("score-excellent", run_r5.Score >= 0.85);
+    i0.ɵɵproperty("title", "Auto Score: " + (run_r5.Score * 100).toFixed(0) + "% automated evaluation");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", (run_r5.Score * 100).toFixed(0), "%");
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_span_1_Template, 2, 0, "span", 117)(2, TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_span_2_Template, 4, 10, "span", 118);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const run_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", run_r5.Score == null);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", run_r5.Score != null);
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_div_20_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 125);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tag_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r7);
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_div_20_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 126);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const run_r5 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("+", ctx_r0.getRunTags(run_r5).length - 3, "");
+} }
+function TestFormComponentExtended_div_51_div_2_div_1_div_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 122);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_51_div_2_div_1_div_20_span_1_Template, 2, 1, "span", 123)(2, TestFormComponentExtended_div_51_div_2_div_1_div_20_span_2_Template, 2, 1, "span", 124);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const run_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r0.getRunTags(run_r5).slice(0, 3));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Score: ", run_r5.Score.toFixed(4), "");
+    i0.ɵɵproperty("ngIf", ctx_r0.getRunTags(run_r5).length > 3);
 } }
-function TestFormComponentExtended_div_45_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+function TestFormComponentExtended_div_51_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_45_div_1_div_1_Template_div_click_0_listener() { const run_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTestRun(run_r5.ID)); });
-    i0.ɵɵelementStart(1, "div", 59);
-    i0.ɵɵelement(2, "i", 60);
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_51_div_2_div_1_Template_div_click_0_listener() { const run_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTestRun(run_r5.ID)); });
+    i0.ɵɵelementStart(1, "div", 93);
+    i0.ɵɵelement(2, "i", 94);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 61)(4, "div", 62)(5, "span", 63);
+    i0.ɵɵelementStart(3, "div", 95)(4, "div", 96)(5, "span", 97);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 64);
+    i0.ɵɵelementStart(7, "span", 98);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 65)(10, "span");
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "date");
+    i0.ɵɵelementStart(9, "div", 99)(10, "span");
+    i0.ɵɵelement(11, "i", 100);
+    i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(13, TestFormComponentExtended_div_45_div_1_div_1_span_13_Template, 2, 1, "span", 66)(14, TestFormComponentExtended_div_45_div_1_div_1_span_14_Template, 2, 1, "span", 66)(15, TestFormComponentExtended_div_45_div_1_div_1_span_15_Template, 2, 1, "span", 66);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(16, "i", 67);
+    i0.ɵɵtemplate(13, TestFormComponentExtended_div_51_div_2_div_1_span_13_Template, 3, 1, "span", 101)(14, TestFormComponentExtended_div_51_div_2_div_1_span_14_Template, 3, 1, "span", 101)(15, TestFormComponentExtended_div_51_div_2_div_1_mj_entity_link_pill_15_Template, 1, 2, "mj-entity-link-pill", 102);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 103);
+    i0.ɵɵtemplate(17, TestFormComponentExtended_div_51_div_2_div_1_span_17_Template, 4, 17, "span", 104)(18, TestFormComponentExtended_div_51_div_2_div_1_ng_container_18_Template, 3, 2, "ng-container", 101)(19, TestFormComponentExtended_div_51_div_2_div_1_ng_container_19_Template, 3, 2, "ng-container", 101);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(20, TestFormComponentExtended_div_51_div_2_div_1_div_20_Template, 3, 2, "div", 105);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(21, "i", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const run_r5 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", run_r5.Status === "Passed" ? "#4caf50" : run_r5.Status === "Failed" ? "#f44336" : "#ff9800");
+    i0.ɵɵstyleProp("background-color", ctx_r0.getRunStatusColor(run_r5.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-check", run_r5.Status === "Passed")("fa-times", run_r5.Status === "Failed")("fa-exclamation", run_r5.Status === "Error");
+    i0.ɵɵclassProp("fa-check", run_r5.Status === "Passed")("fa-times", run_r5.Status === "Failed")("fa-exclamation", run_r5.Status === "Error")("fa-stopwatch", run_r5.Status === "Timeout")("fa-spinner", run_r5.Status === "Running")("fa-clock", run_r5.Status === "Pending");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("Run #", run_r5.ID.substring(0, 8), "");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", run_r5.Status === "Passed" ? "#4caf50" : run_r5.Status === "Failed" ? "#f44336" : "#ff9800");
+    i0.ɵɵstyleProp("color", ctx_r0.getRunStatusColor(run_r5.Status));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(run_r5.Status);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(12, 16, run_r5.StartedAt, "short"));
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getRelativeTime(run_r5.StartedAt), "");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", run_r5.DurationSeconds);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", run_r5.CostUSD);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", run_r5.Score != null);
+    i0.ɵɵproperty("ngIf", run_r5.TargetLogEntityID && run_r5.TargetLogID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showHuman);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showAuto);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.getRunTags(run_r5).length > 0);
 } }
-function TestFormComponentExtended_div_45_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
-    i0.ɵɵtemplate(1, TestFormComponentExtended_div_45_div_1_div_1_Template, 17, 19, "div", 57);
+function TestFormComponentExtended_div_51_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_51_div_2_div_1_Template, 22, 26, "div", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r0.testRuns);
 } }
-function TestFormComponentExtended_div_45_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 69);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No test runs found for this test");
+function TestFormComponentExtended_div_51_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 127)(1, "div", 128);
+    i0.ɵɵelement(2, "i", 129);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h4");
+    i0.ɵɵtext(4, "No Test Runs Yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "Run this test to see execution history and results here.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_51_div_3_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.runTest()); });
+    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵtext(9, " Run Test Now ");
     i0.ɵɵelementEnd()();
 } }
-function TestFormComponentExtended_div_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵtemplate(1, TestFormComponentExtended_div_45_div_1_Template, 2, 1, "div", 54)(2, TestFormComponentExtended_div_45_div_2_Template, 4, 0, "div", 55);
+function TestFormComponentExtended_div_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_51_div_1_Template, 3, 2, "div", 79)(2, TestFormComponentExtended_div_51_div_2_Template, 2, 1, "div", 80)(3, TestFormComponentExtended_div_51_div_3_Template, 10, 0, "div", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.testRuns.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.loadingRuns);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r0.loadingRuns && ctx_r0.testRuns.length > 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.testRunsLoaded && ctx_r0.testRuns.length === 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.testRunsLoaded && !ctx_r0.loadingRuns && ctx_r0.testRuns.length === 0);
+} }
+function TestFormComponentExtended_div_52_div_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "div", 86);
+    i0.ɵɵelementStart(2, "div", 87);
+    i0.ɵɵelement(3, "div", 88)(4, "div", 89);
+    i0.ɵɵelementEnd()();
+} }
+function TestFormComponentExtended_div_52_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82)(1, "div", 83);
+    i0.ɵɵtemplate(2, TestFormComponentExtended_div_52_div_1_div_2_Template, 5, 0, "div", 84);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c1));
 } }
-function TestFormComponentExtended_div_46_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵlistener("click", function TestFormComponentExtended_div_46_div_1_div_1_Template_div_click_0_listener() { const suiteTest_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTestSuite(suiteTest_r7.SuiteID)); });
-    i0.ɵɵelementStart(1, "div", 75);
-    i0.ɵɵelement(2, "i", 76);
+function TestFormComponentExtended_div_52_div_2_div_1_span_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suiteTest_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", suiteTest_r10.Status, "");
+} }
+function TestFormComponentExtended_div_52_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 134);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_52_div_2_div_1_Template_div_click_0_listener() { const suiteTest_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openTestSuite(suiteTest_r10.SuiteID)); });
+    i0.ɵɵelementStart(1, "div", 135);
+    i0.ɵɵelement(2, "i", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 77)(4, "div", 78);
+    i0.ɵɵelementStart(3, "div", 136)(4, "div", 137);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 79)(7, "span");
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(9, "i", 67);
+    i0.ɵɵelementStart(6, "div", 138)(7, "span");
+    i0.ɵɵelement(8, "i", 139);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(10, TestFormComponentExtended_div_52_div_2_div_1_span_10_Template, 3, 1, "span", 101);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(11, "i", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const suiteTest_r7 = ctx.$implicit;
+    const suiteTest_r10 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(suiteTest_r7.Suite);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Sequence: ", suiteTest_r7.Sequence, "");
+    i0.ɵɵtextInterpolate(suiteTest_r10.Suite);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" Sequence: ", suiteTest_r10.Sequence, "");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suiteTest_r10.Status);
 } }
-function TestFormComponentExtended_div_46_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵtemplate(1, TestFormComponentExtended_div_46_div_1_div_1_Template, 10, 2, "div", 73);
+function TestFormComponentExtended_div_52_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 132);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_52_div_2_div_1_Template, 12, 3, "div", 133);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r0.suiteTests);
 } }
-function TestFormComponentExtended_div_46_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 69);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "This test is not part of any test suite");
+function TestFormComponentExtended_div_52_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127)(1, "div", 128);
+    i0.ɵɵelement(2, "i", 140);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h4");
+    i0.ɵɵtext(4, "Not Part of Any Suite");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "This test is not included in any test suites. Add it to a suite to run it with other tests.");
+    i0.ɵɵelementEnd()();
+} }
+function TestFormComponentExtended_div_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_52_div_1_Template, 3, 2, "div", 79)(2, TestFormComponentExtended_div_52_div_2_Template, 2, 1, "div", 131)(3, TestFormComponentExtended_div_52_div_3_Template, 7, 0, "div", 81);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.loadingSuites);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r0.loadingSuites && ctx_r0.suiteTests.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.suiteTestsLoaded && !ctx_r0.loadingSuites && ctx_r0.suiteTests.length === 0);
+} }
+function TestFormComponentExtended_div_53_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵelement(1, "mj-loading", 143);
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_53_div_2_div_17_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 154)(1, "div", 160);
+    i0.ɵɵelement(2, "i", 161);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 156)(4, "div", 157);
+    i0.ɵɵtext(5);
+    i0.ɵɵelement(6, "i", 162);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 158);
+    i0.ɵɵtext(8, "Pass Rate");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getOverallPassRate().toFixed(1), "% ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-arrow-up", ctx_r0.getPassRateTrend() === "up")("fa-arrow-down", ctx_r0.getPassRateTrend() === "down")("fa-minus", ctx_r0.getPassRateTrend() === "stable")("trend-up", ctx_r0.getPassRateTrend() === "up")("trend-down", ctx_r0.getPassRateTrend() === "down");
+} }
+function TestFormComponentExtended_div_53_div_2_div_17_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 154)(1, "div", 155);
+    i0.ɵɵelement(2, "i", 163);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 156)(4, "div", 157);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 158);
+    i0.ɵɵtext(7, "Avg Score");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", (ctx_r0.getOverallAvgScore() * 100).toFixed(1), "%");
+} }
+function TestFormComponentExtended_div_53_div_2_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 153)(1, "div", 154)(2, "div", 155);
+    i0.ɵɵelement(3, "i", 129);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 156)(5, "div", 157);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 158);
+    i0.ɵɵtext(8, "Total Runs");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(9, TestFormComponentExtended_div_53_div_2_div_17_div_9_Template, 9, 11, "div", 159)(10, TestFormComponentExtended_div_53_div_2_div_17_div_10_Template, 8, 1, "div", 159);
+    i0.ɵɵelementStart(11, "div", 154)(12, "div", 155);
+    i0.ɵɵelement(13, "i", 107);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 156)(15, "div", 157);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 158);
+    i0.ɵɵtext(18, "Avg Duration");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 154)(20, "div", 155);
+    i0.ɵɵelement(21, "i", 108);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 156)(23, "div", 157);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 158);
+    i0.ɵɵtext(26, "Avg Cost");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.getTotalRuns());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showAuto);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(ctx_r0.getOverallAvgDuration()));
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r0.formatCost(ctx_r0.getOverallAvgCost()));
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_th_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Passed");
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_th_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Failed");
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_th_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Pass Rate");
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_th_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Avg Score");
+    i0.ɵɵelementEnd();
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 177);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(day_r12.passCount);
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 178);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(day_r12.failCount);
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 179)(1, "div", 180);
+    i0.ɵɵelement(2, "div", 181);
+    i0.ɵɵelementStart(3, "span", 182);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const day_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", day_r12.passRate, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", day_r12.passRate.toFixed(1), "%");
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 183);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const day_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", (day_r12.avgScore * 100).toFixed(1), "%");
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_tr_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 169);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "td", 170);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_6_Template, 2, 1, "td", 171)(7, TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_7_Template, 2, 1, "td", 172)(8, TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_8_Template, 5, 3, "td", 173)(9, TestFormComponentExtended_div_53_div_2_div_18_tr_21_td_9_Template, 2, 1, "td", 174);
+    i0.ɵɵelementStart(10, "td", 175);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "td", 176);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const day_r12 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(3, 8, day_r12.date, "mediumDate"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(day_r12.runCount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showAuto);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(day_r12.avgDuration));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.formatCost(day_r12.avgCost));
+} }
+function TestFormComponentExtended_div_53_div_2_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 164)(1, "h3");
+    i0.ɵɵelement(2, "i", 165);
+    i0.ɵɵtext(3, " Daily Performance");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 166)(5, "table", 167)(6, "thead")(7, "tr")(8, "th");
+    i0.ɵɵtext(9, "Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Runs");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, TestFormComponentExtended_div_53_div_2_div_18_th_12_Template, 2, 0, "th", 101)(13, TestFormComponentExtended_div_53_div_2_div_18_th_13_Template, 2, 0, "th", 101)(14, TestFormComponentExtended_div_53_div_2_div_18_th_14_Template, 2, 0, "th", 101)(15, TestFormComponentExtended_div_53_div_2_div_18_th_15_Template, 2, 0, "th", 101);
+    i0.ɵɵelementStart(16, "th");
+    i0.ɵɵtext(17, "Avg Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "th");
+    i0.ɵɵtext(19, "Avg Cost");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "tbody");
+    i0.ɵɵtemplate(21, TestFormComponentExtended_div_53_div_2_div_18_tr_21_Template, 14, 11, "tr", 168);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(12);
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showAuto);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngForOf", ctx_r0.historyData);
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 199);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tag_r15 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r15);
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 200);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suite_r14 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("+", suite_r14.tags.length - 3, "");
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 196);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_span_1_Template, 2, 1, "span", 197)(2, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_span_2_Template, 2, 1, "span", 198);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suite_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", suite_r14.tags.slice(0, 3));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suite_r14.tags.length > 3);
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 191)(1, "span", 201);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 193);
+    i0.ɵɵtext(4, "Pass Rate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const suite_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("high", suite_r14.passRate >= 80)("low", suite_r14.passRate < 50);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", suite_r14.passRate.toFixed(1), "% ");
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 191)(1, "span", 192);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 193);
+    i0.ɵɵtext(4, "Avg Score");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const suite_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", (suite_r14.avgScore * 100).toFixed(1), "%");
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_div_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 191)(1, "span", 192);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 193);
+    i0.ɵɵtext(4, "Last Run");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const suite_r14 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getRelativeTime(suite_r14.lastRun));
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_div_19_div_5_Template_div_click_0_listener() { const suite_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.openSuiteFromHistory(suite_r14.suiteId)); });
+    i0.ɵɵelementStart(1, "div", 187)(2, "div", 188);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_4_Template, 3, 2, "div", 189);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 190)(6, "div", 191)(7, "span", 192);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 193);
+    i0.ɵɵtext(10, "Runs");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_11_Template, 5, 5, "div", 194)(12, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_12_Template, 5, 1, "div", 194);
+    i0.ɵɵelementStart(13, "div", 191)(14, "span", 192);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span", 193);
+    i0.ɵɵtext(17, "Avg Duration");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 191)(19, "span", 192);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span", 193);
+    i0.ɵɵtext(22, "Avg Cost");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(23, TestFormComponentExtended_div_53_div_2_div_19_div_5_div_23_Template, 5, 1, "div", 194);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(24, "i", 195);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const suite_r14 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(suite_r14.suiteName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", suite_r14.tags.length > 0);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(suite_r14.totalRuns);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showExecution);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.evalPreferences.showAuto);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.formatDuration(suite_r14.avgDuration));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.formatCost(suite_r14.avgCost));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", suite_r14.lastRun);
+} }
+function TestFormComponentExtended_div_53_div_2_div_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 164)(1, "h3");
+    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵtext(3, " Performance by Suite");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 184);
+    i0.ɵɵtemplate(5, TestFormComponentExtended_div_53_div_2_div_19_div_5_Template, 25, 8, "div", 185);
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r0.suitePerformance);
 } }
-function TestFormComponentExtended_div_46_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵtemplate(1, TestFormComponentExtended_div_46_div_1_Template, 2, 1, "div", 71)(2, TestFormComponentExtended_div_46_div_2_Template, 4, 0, "div", 55);
+function TestFormComponentExtended_div_53_div_2_div_20_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 127)(1, "div", 128);
+    i0.ɵɵelement(2, "i", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h4");
+    i0.ɵɵtext(4, "No History Available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "Run this test to start building history and analytics data.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_div_20_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.runTest()); });
+    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵtext(9, " Run Test Now ");
+    i0.ɵɵelementEnd()();
+} }
+function TestFormComponentExtended_div_53_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 144)(1, "div", 145)(2, "div", 146)(3, "span", 147);
+    i0.ɵɵtext(4, "Time Range:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 148);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setHistoryTimeRange("7d")); });
+    i0.ɵɵtext(6, "7 Days");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 148);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setHistoryTimeRange("30d")); });
+    i0.ɵɵtext(8, "30 Days");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 148);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setHistoryTimeRange("90d")); });
+    i0.ɵɵtext(10, "90 Days");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 148);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setHistoryTimeRange("all")); });
+    i0.ɵɵtext(12, "All Time");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 149)(14, "button", 14);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_53_div_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportHistoryToCSV()); });
+    i0.ɵɵelement(15, "i", 150);
+    i0.ɵɵtext(16, " Export CSV ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(17, TestFormComponentExtended_div_53_div_2_div_17_Template, 27, 5, "div", 151)(18, TestFormComponentExtended_div_53_div_2_div_18_Template, 22, 5, "div", 152)(19, TestFormComponentExtended_div_53_div_2_div_19_Template, 6, 1, "div", 152)(20, TestFormComponentExtended_div_53_div_2_div_20_Template, 10, 0, "div", 81);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("active", ctx_r0.historyTimeRange === "7d");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.historyTimeRange === "30d");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.historyTimeRange === "90d");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.historyTimeRange === "all");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r0.historyData.length === 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.historyData.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.historyData.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.suitePerformance.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.historyData.length === 0);
+} }
+function TestFormComponentExtended_div_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 141);
+    i0.ɵɵtemplate(1, TestFormComponentExtended_div_53_div_1_Template, 2, 0, "div", 79)(2, TestFormComponentExtended_div_53_div_2_Template, 21, 13, "div", 142);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.suiteTests.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.loadingHistory);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.suiteTestsLoaded && ctx_r0.suiteTests.length === 0);
+    i0.ɵɵproperty("ngIf", !ctx_r0.loadingHistory && ctx_r0.historyLoaded);
+} }
+function TestFormComponentExtended_div_56_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 202)(1, "div", 203);
+    i0.ɵɵelement(2, "i", 33);
+    i0.ɵɵtext(3, " Shortcuts ");
+    i0.ɵɵelementStart(4, "button", 204);
+    i0.ɵɵlistener("click", function TestFormComponentExtended_div_56_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleShortcuts()); });
+    i0.ɵɵelement(5, "i", 205);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 206)(7, "div", 207)(8, "span");
+    i0.ɵɵtext(9, "Refresh");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 208)(11, "kbd");
+    i0.ɵɵtext(12, "Cmd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "kbd");
+    i0.ɵɵtext(14, "R");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 207)(16, "span");
+    i0.ɵɵtext(17, "Run Test");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span", 208)(19, "kbd");
+    i0.ɵɵtext(20, "Cmd");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "kbd");
+    i0.ɵɵtext(22, "Enter");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(23, "div", 207)(24, "span");
+    i0.ɵɵtext(25, "Switch Tabs");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 208)(27, "kbd");
+    i0.ɵɵtext(28, "1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(29, "-");
+    i0.ɵɵelementStart(30, "kbd");
+    i0.ɵɵtext(31, "5");
+    i0.ɵɵelementEnd()()()()();
 } }
+/** Settings key for keyboard shortcuts visibility */
+const SHORTCUTS_SETTINGS_KEY = '__mj.Testing.ShowKeyboardShortcuts';
 let TestFormComponentExtended = class TestFormComponentExtended extends TestFormComponent {
-    constructor(elementRef, sharedService, router, route, cdr, testingDialogService) {
+    constructor(elementRef, sharedService, router, route, cdr, testingDialogService, evalPrefsService, viewContainerRef) {
         super(elementRef, sharedService, router, route, cdr);
         this.router = router;
         this.cdr = cdr;
         this.testingDialogService = testingDialogService;
+        this.evalPrefsService = evalPrefsService;
+        this.viewContainerRef = viewContainerRef;
         this.destroy$ = new Subject();
         // UI state
         this.activeTab = 'overview';
         this.loading = false;
+        this.loadingRuns = false;
+        this.loadingSuites = false;
         this.error = null;
         this.testRunsLoaded = false;
         this.suiteTestsLoaded = false;
+        this.isRefreshing = false;
         // Related data
         this.testRuns = [];
         this.suiteTests = [];
+        // Human feedback map: testRunId -> feedback entity
+        this.feedbackMap = new Map();
+        // History tab data
+        this.historyLoaded = false;
+        this.loadingHistory = false;
+        this.historyTimeRange = '30d';
+        this.historyData = [];
+        this.suitePerformance = [];
+        this.uniqueTags = [];
+        this.selectedTagFilter = null;
         // Parsed JSON fields
         this.parsedData = {};
         // Active JSON view
         this.activeJsonView = 'input';
+        // Code editor configuration
+        this.jsonToolbar = createCopyOnlyToolbar();
+        // Keyboard shortcuts
+        this.keyboardShortcutsEnabled = true;
+        this.showShortcuts = false; // Hidden by default
+        this.shortcutsSettingEntity = null;
+        this.metadata = new Metadata();
+        // Evaluation preferences
+        this.evalPreferences = { showExecution: true, showHuman: true, showAuto: false };
     }
     async ngOnInit() {
         await super.ngOnInit();
+        this.loadShortcutsSetting();
+        // Subscribe to evaluation preferences
+        this.evalPrefsService.preferences$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(prefs => {
+            this.evalPreferences = prefs;
+            this.cdr.markForCheck();
+        });
         if (this.record && this.record.ID) {
-            await this.loadRelatedData();
             this.parseJsonFields();
         }
     }
@@ -439,23 +1179,48 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
         this.destroy$.next();
         this.destroy$.complete();
     }
-    async loadRelatedData() {
-        this.loading = true;
-        try {
-            this.cdr.markForCheck();
+    // Keyboard shortcuts
+    handleKeyboardShortcut(event) {
+        if (!this.keyboardShortcutsEnabled)
+            return;
+        // Cmd/Ctrl + R: Refresh
+        if ((event.metaKey || event.ctrlKey) && event.key === 'r' && !event.shiftKey) {
+            event.preventDefault();
+            this.refresh();
+            return;
         }
-        catch (error) {
-            console.error('Error loading related data:', error);
-            this.error = 'Failed to load related data';
+        // Cmd/Ctrl + Enter: Run test
+        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault();
+            this.runTest();
+            return;
         }
-        finally {
-            this.loading = false;
-            this.cdr.markForCheck();
+        // Number keys for tabs (1-5)
+        if (!event.metaKey && !event.ctrlKey && !event.altKey) {
+            switch (event.key) {
+                case '1':
+                    this.changeTab('overview');
+                    break;
+                case '2':
+                    this.changeTab('config');
+                    break;
+                case '3':
+                    this.changeTab('runs');
+                    break;
+                case '4':
+                    this.changeTab('suites');
+                    break;
+                case '5':
+                    this.changeTab('analytics');
+                    break;
+            }
         }
     }
     async loadTestRuns() {
         if (this.testRunsLoaded)
             return;
+        this.loadingRuns = true;
+        this.cdr.markForCheck();
         try {
             const rv = new RunView();
             const result = await rv.RunView({
@@ -467,17 +1232,87 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
             });
             if (result.Success) {
                 this.testRuns = result.Results || [];
+                // Load feedbacks for all test runs
+                if (this.testRuns.length > 0) {
+                    await this.loadFeedbacksForTestRuns(this.testRuns.map(r => r.ID));
+                }
             }
             this.testRunsLoaded = true;
-            this.cdr.markForCheck();
         }
         catch (error) {
             console.error('Error loading test runs:', error);
+            SharedService.Instance.CreateSimpleNotification('Failed to load test runs', 'error', 3000);
         }
+        finally {
+            this.loadingRuns = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Load feedbacks for a batch of test run IDs
+     */
+    async loadFeedbacksForTestRuns(testRunIds) {
+        if (testRunIds.length === 0)
+            return;
+        try {
+            const rv = new RunView();
+            const chunkSize = 50;
+            for (let i = 0; i < testRunIds.length; i += chunkSize) {
+                const chunk = testRunIds.slice(i, i + chunkSize);
+                const inClause = chunk.map(id => `'${id}'`).join(',');
+                const result = await rv.RunView({
+                    EntityName: 'MJ: Test Run Feedbacks',
+                    ExtraFilter: `TestRunID IN (${inClause})`,
+                    ResultType: 'entity_object'
+                });
+                if (result.Success && result.Results) {
+                    for (const feedback of result.Results) {
+                        this.feedbackMap.set(feedback.TestRunID, feedback);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load feedbacks:', error);
+        }
+    }
+    /**
+     * Get feedback for a specific test run
+     */
+    getFeedbackForRun(testRunId) {
+        return this.feedbackMap.get(testRunId);
+    }
+    /**
+     * Get tooltip for status indicator
+     */
+    getStatusTooltip(status) {
+        switch (status) {
+            case 'Passed': return 'Status: Passed - Test completed without error';
+            case 'Failed': return 'Status: Failed - Test assertions did not pass';
+            case 'Error': return 'Status: Error - Test encountered an exception';
+            case 'Timeout': return 'Status: Timeout - Test exceeded time limit';
+            case 'Skipped': return 'Status: Skipped - Test was not executed';
+            case 'Running': return 'Status: Running - Test is currently executing';
+            case 'Pending': return 'Status: Pending - Test waiting to run';
+            default: return `Status: ${status}`;
+        }
+    }
+    /**
+     * Get tooltip for human review with rating and optional comments
+     */
+    getHumanTooltip(rating, comments) {
+        let tooltip = `Human Review: ${rating}/10 rating`;
+        if (comments) {
+            const truncated = comments.length > 200 ? comments.substring(0, 200) + '...' : comments;
+            tooltip += `\n\n"${truncated}"`;
+        }
+        return tooltip;
     }
     async loadSuiteTests() {
         if (this.suiteTestsLoaded)
             return;
+        this.loadingSuites = true;
+        this.cdr.markForCheck();
         try {
             const rv = new RunView();
             const result = await rv.RunView({
@@ -490,10 +1325,14 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
                 this.suiteTests = result.Results || [];
             }
             this.suiteTestsLoaded = true;
-            this.cdr.markForCheck();
         }
         catch (error) {
             console.error('Error loading suite tests:', error);
+            SharedService.Instance.CreateSimpleNotification('Failed to load test suites', 'error', 3000);
+        }
+        finally {
+            this.loadingSuites = false;
+            this.cdr.markForCheck();
         }
     }
     parseJsonFields() {
@@ -524,6 +1363,9 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
         if (tab === 'suites' && !this.suiteTestsLoaded) {
             this.loadSuiteTests();
         }
+        if (tab === 'analytics' && !this.historyLoaded) {
+            this.loadHistory();
+        }
         this.cdr.markForCheck();
     }
     setJsonView(view) {
@@ -532,10 +1374,10 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
     }
     getStatusColor() {
         switch (this.record.Status) {
-            case 'Active': return '#4caf50';
-            case 'Disabled': return '#9e9e9e';
-            case 'Pending': return '#ffc107';
-            default: return '#999';
+            case 'Active': return '#10b981';
+            case 'Disabled': return '#6b7280';
+            case 'Pending': return '#f59e0b';
+            default: return '#9ca3af';
         }
     }
     getStatusIcon() {
@@ -546,6 +1388,20 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
             default: return 'fa-circle-question';
         }
     }
+    getStatusClass() {
+        return `status-${this.record.Status?.toLowerCase() || 'unknown'}`;
+    }
+    getRunStatusColor(status) {
+        switch (status) {
+            case 'Passed': return '#10b981';
+            case 'Failed': return '#ef4444';
+            case 'Error': return '#f59e0b';
+            case 'Timeout': return '#f97316';
+            case 'Running': return '#3b82f6';
+            case 'Pending': return '#8b5cf6';
+            default: return '#6b7280';
+        }
+    }
     getPassRate() {
         if (this.testRuns.length === 0)
             return 0;
@@ -579,40 +1435,399 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
     formatCost(cost) {
         return `$${cost.toFixed(6)}`;
     }
+    formatTimeout(ms) {
+        if (ms === null || ms === undefined)
+            return 'Default (5 min)';
+        if (ms < 1000)
+            return `${ms}ms`;
+        if (ms < 60000)
+            return `${(ms / 1000).toFixed(1)}s`;
+        if (ms < 3600000) {
+            const mins = Math.floor(ms / 60000);
+            const secs = Math.floor((ms % 60000) / 1000);
+            return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+        }
+        const hours = Math.floor(ms / 3600000);
+        const mins = Math.floor((ms % 3600000) / 60000);
+        return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+    }
     openTestRun(runId) {
         SharedService.Instance.OpenEntityRecord('MJ: Test Runs', CompositeKey.FromID(runId));
     }
+    getRunTags(run) {
+        return TagsHelper.parseTags(run.Tags);
+    }
     openTestSuite(suiteId) {
         SharedService.Instance.OpenEntityRecord('MJ: Test Suites', CompositeKey.FromID(suiteId));
     }
     async runTest() {
         if (this.record?.ID) {
-            this.testingDialogService.OpenTestDialog(this.record.ID);
+            this.testingDialogService.OpenTestDialog(this.record.ID, this.viewContainerRef);
         }
     }
     async refresh() {
-        await this.loadRelatedData();
-        if (this.testRunsLoaded) {
-            this.testRunsLoaded = false;
-            await this.loadTestRuns();
+        this.isRefreshing = true;
+        this.cdr.markForCheck();
+        try {
+            await this.record.Load(this.record.ID);
+            this.parseJsonFields();
+            // Reset lazy-loaded data to force reload
+            if (this.testRunsLoaded) {
+                this.testRunsLoaded = false;
+                this.testRuns = [];
+                await this.loadTestRuns();
+            }
+            if (this.suiteTestsLoaded) {
+                this.suiteTestsLoaded = false;
+                this.suiteTests = [];
+                await this.loadSuiteTests();
+            }
+            SharedService.Instance.CreateSimpleNotification('Refreshed successfully', 'success', 2000);
         }
-        if (this.suiteTestsLoaded) {
-            this.suiteTestsLoaded = false;
-            await this.loadSuiteTests();
+        catch {
+            SharedService.Instance.CreateSimpleNotification('Failed to refresh', 'error', 3000);
+        }
+        finally {
+            this.isRefreshing = false;
+            this.cdr.markForCheck();
         }
-        this.cdr.markForCheck();
     }
     getJsonData() {
+        let data;
         switch (this.activeJsonView) {
-            case 'input': return this.parsedData.inputDefinition;
-            case 'expected': return this.parsedData.expectedOutcomes;
-            case 'config': return this.parsedData.configuration;
-            case 'tags': return this.parsedData.tags;
-            default: return null;
+            case 'input':
+                data = this.parsedData.inputDefinition;
+                break;
+            case 'expected':
+                data = this.parsedData.expectedOutcomes;
+                break;
+            case 'config':
+                data = this.parsedData.configuration;
+                break;
+            case 'tags':
+                data = this.parsedData.tags;
+                break;
+        }
+        return data ? JSON.stringify(data, null, 2) : '// No data available';
+    }
+    getRelativeTime(date) {
+        if (!date)
+            return 'N/A';
+        const d = new Date(date);
+        const now = new Date();
+        const diffMs = now.getTime() - d.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 7)
+            return `${diffDays}d ago`;
+        return d.toLocaleDateString();
+    }
+    // ===========================
+    // History Tab Methods
+    // ===========================
+    async loadHistory() {
+        if (this.historyLoaded)
+            return;
+        this.loadingHistory = true;
+        this.cdr.markForCheck();
+        try {
+            // Load all test runs for this test
+            const rv = new RunView();
+            const runsResult = await rv.RunView({
+                EntityName: 'MJ: Test Runs',
+                ExtraFilter: `TestID='${this.record.ID}'`,
+                OrderBy: 'StartedAt DESC',
+                ResultType: 'entity_object'
+            });
+            if (runsResult.Success && runsResult.Results) {
+                const allRuns = runsResult.Results;
+                // Extract unique tags from all runs
+                this.uniqueTags = TagsHelper.getUniqueTags(allRuns.map(r => r.Tags));
+                // Build history data (aggregated by date)
+                this.historyData = this.buildHistoryData(allRuns);
+                // Build suite performance data
+                await this.buildSuitePerformance(allRuns);
+            }
+            this.historyLoaded = true;
+        }
+        catch (error) {
+            console.error('Error loading history:', error);
+            SharedService.Instance.CreateSimpleNotification('Failed to load history', 'error', 3000);
+        }
+        finally {
+            this.loadingHistory = false;
+            this.cdr.markForCheck();
+        }
+    }
+    buildHistoryData(runs) {
+        // Filter by time range
+        const filteredRuns = this.filterRunsByTimeRange(runs);
+        // Group by date
+        const dateMap = new Map();
+        for (const run of filteredRuns) {
+            if (run.StartedAt) {
+                const dateKey = new Date(run.StartedAt).toISOString().split('T')[0];
+                if (!dateMap.has(dateKey)) {
+                    dateMap.set(dateKey, []);
+                }
+                dateMap.get(dateKey).push(run);
+            }
+        }
+        // Convert to data points
+        const dataPoints = [];
+        for (const [dateKey, dateRuns] of dateMap) {
+            const passCount = dateRuns.filter(r => r.Status === 'Passed').length;
+            const failCount = dateRuns.filter(r => r.Status === 'Failed' || r.Status === 'Error').length;
+            const scores = dateRuns.filter(r => r.Score != null).map(r => r.Score);
+            const durations = dateRuns.filter(r => r.DurationSeconds != null).map(r => r.DurationSeconds);
+            const costs = dateRuns.filter(r => r.CostUSD != null).map(r => r.CostUSD);
+            dataPoints.push({
+                date: new Date(dateKey),
+                passRate: dateRuns.length > 0 ? (passCount / dateRuns.length) * 100 : 0,
+                avgScore: scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : 0,
+                avgDuration: durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0,
+                avgCost: costs.length > 0 ? costs.reduce((a, b) => a + b, 0) / costs.length : 0,
+                runCount: dateRuns.length,
+                passCount,
+                failCount
+            });
+        }
+        // Sort by date descending
+        return dataPoints.sort((a, b) => b.date.getTime() - a.date.getTime());
+    }
+    filterRunsByTimeRange(runs) {
+        if (this.historyTimeRange === 'all')
+            return runs;
+        const now = new Date();
+        let cutoff;
+        switch (this.historyTimeRange) {
+            case '7d':
+                cutoff = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+                break;
+            case '30d':
+                cutoff = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+                break;
+            case '90d':
+                cutoff = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
+                break;
+            default:
+                return runs;
+        }
+        return runs.filter(r => r.StartedAt && new Date(r.StartedAt) >= cutoff);
+    }
+    async buildSuitePerformance(runs) {
+        // Group runs by suite
+        const suiteMap = new Map();
+        for (const run of runs) {
+            if (run.TestSuiteRunID) {
+                if (!suiteMap.has(run.TestSuiteRunID)) {
+                    suiteMap.set(run.TestSuiteRunID, []);
+                }
+                suiteMap.get(run.TestSuiteRunID).push(run);
+            }
+        }
+        // Load suite run info for each unique suite run
+        if (suiteMap.size > 0) {
+            const suiteRunIds = Array.from(suiteMap.keys()).map(id => `'${id}'`).join(',');
+            const rv = new RunView();
+            const suiteRunsResult = await rv.RunView({
+                EntityName: 'MJ: Test Suite Runs',
+                ExtraFilter: `ID IN (${suiteRunIds})`,
+                ResultType: 'entity_object'
+            });
+            if (suiteRunsResult.Success && suiteRunsResult.Results) {
+                // Group by suite ID
+                const suiteIdMap = new Map();
+                for (const suiteRun of suiteRunsResult.Results) {
+                    const suiteId = suiteRun.SuiteID;
+                    if (!suiteIdMap.has(suiteId)) {
+                        suiteIdMap.set(suiteId, { runs: [], suiteRuns: [] });
+                    }
+                    suiteIdMap.get(suiteId).suiteRuns.push(suiteRun);
+                    const testRuns = suiteMap.get(suiteRun.ID) || [];
+                    suiteIdMap.get(suiteId).runs.push(...testRuns);
+                }
+                // Build performance data for each suite
+                this.suitePerformance = [];
+                for (const [suiteId, data] of suiteIdMap) {
+                    const suiteName = data.suiteRuns[0]?.Suite || 'Unknown Suite';
+                    const totalRuns = data.runs.length;
+                    const passedRuns = data.runs.filter(r => r.Status === 'Passed').length;
+                    const failedRuns = data.runs.filter(r => r.Status === 'Failed' || r.Status === 'Error').length;
+                    const scores = data.runs.filter(r => r.Score != null).map(r => r.Score);
+                    const durations = data.runs.filter(r => r.DurationSeconds != null).map(r => r.DurationSeconds);
+                    const costs = data.runs.filter(r => r.CostUSD != null).map(r => r.CostUSD);
+                    // Collect all tags from suite runs
+                    const allTags = TagsHelper.getUniqueTags(data.suiteRuns.map(sr => sr.Tags));
+                    // Find most recent run
+                    const lastRun = data.runs
+                        .filter(r => r.StartedAt)
+                        .sort((a, b) => new Date(b.StartedAt).getTime() - new Date(a.StartedAt).getTime())[0];
+                    this.suitePerformance.push({
+                        suiteId,
+                        suiteName,
+                        totalRuns,
+                        passedRuns,
+                        failedRuns,
+                        passRate: totalRuns > 0 ? (passedRuns / totalRuns) * 100 : 0,
+                        avgScore: scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : 0,
+                        avgDuration: durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0,
+                        avgCost: costs.length > 0 ? costs.reduce((a, b) => a + b, 0) / costs.length : 0,
+                        lastRun: lastRun?.StartedAt ? new Date(lastRun.StartedAt) : null,
+                        tags: allTags
+                    });
+                }
+                // Sort by total runs descending
+                this.suitePerformance.sort((a, b) => b.totalRuns - a.totalRuns);
+            }
         }
     }
-    static { this.ɵfac = function TestFormComponentExtended_Factory(t) { return new (t || TestFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.TestingDialogService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestFormComponentExtended, selectors: [["mj-test-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 47, vars: 24, consts: [["kendoDialogContainer", "", 1, "test-form"], [1, "test-header"], [1, "header-content"], [1, "header-left"], [1, "test-icon"], [1, "fas", "fa-flask"], [1, "test-info"], [1, "test-meta"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "test-type"], [1, "header-actions"], ["kendoButton", "", "icon", "play", 3, "click"], ["kendoButton", "", "icon", "sync", 3, "click"], ["class", "test-description", 4, "ngIf"], ["class", "metrics-bar", 4, "ngIf"], [1, "tabs-container"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-th-large"], [1, "fas", "fa-sliders-h"], [1, "fas", "fa-list"], ["class", "tab-badge", 4, "ngIf"], [1, "fas", "fa-layer-group"], [1, "tab-content"], ["class", "overview-tab", 4, "ngIf"], ["class", "config-tab", 4, "ngIf"], ["class", "runs-tab", 4, "ngIf"], ["class", "suites-tab", 4, "ngIf"], [1, "test-description"], [1, "metrics-bar"], [1, "metric-card"], [1, "metric-label"], [1, "metric-value"], [1, "tab-badge"], [1, "overview-tab"], [1, "info-section"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "json-section"], [1, "json-tabs"], [1, "json-tab", 3, "click"], [1, "json-content"], [1, "config-tab"], [1, "config-section"], [1, "config-grid"], [1, "config-item"], ["type", "number", 1, "config-input", 3, "ngModelChange", "ngModel"], ["type", "number", "step", "0.000001", 1, "config-input", 3, "ngModelChange", "ngModel"], ["rows", "10", 1, "json-editor", 3, "ngModelChange", "ngModel"], ["rows", "5", 1, "json-editor", 3, "ngModelChange", "ngModel"], [1, "runs-tab"], ["class", "runs-list", 4, "ngIf"], ["class", "no-data", 4, "ngIf"], [1, "runs-list"], ["class", "run-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "run-item", 3, "click"], [1, "run-icon"], [1, "fas"], [1, "run-content"], [1, "run-header"], [1, "run-id"], [1, "run-status"], [1, "run-meta"], [4, "ngIf"], [1, "fas", "fa-chevron-right"], [1, "no-data"], [1, "fas", "fa-inbox"], [1, "suites-tab"], ["class", "suites-list", 4, "ngIf"], [1, "suites-list"], ["class", "suite-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "suite-item", 3, "click"], [1, "suite-icon"], [1, "fas", "fa-folder"], [1, "suite-content"], [1, "suite-name"], [1, "suite-meta"]], template: function TestFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    setHistoryTimeRange(range) {
+        this.historyTimeRange = range;
+        this.historyLoaded = false;
+        this.loadHistory();
+    }
+    setTagFilter(tag) {
+        this.selectedTagFilter = tag;
+        this.cdr.markForCheck();
+    }
+    getFilteredHistoryData() {
+        return this.historyData;
+    }
+    getOverallPassRate() {
+        if (this.historyData.length === 0)
+            return 0;
+        const totalRuns = this.historyData.reduce((sum, d) => sum + d.runCount, 0);
+        const totalPassed = this.historyData.reduce((sum, d) => sum + d.passCount, 0);
+        return totalRuns > 0 ? (totalPassed / totalRuns) * 100 : 0;
+    }
+    getOverallAvgScore() {
+        if (this.historyData.length === 0)
+            return 0;
+        const scores = this.historyData.filter(d => d.avgScore > 0).map(d => d.avgScore);
+        return scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : 0;
+    }
+    getOverallAvgDuration() {
+        if (this.historyData.length === 0)
+            return 0;
+        const durations = this.historyData.filter(d => d.avgDuration > 0).map(d => d.avgDuration);
+        return durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+    }
+    getOverallAvgCost() {
+        if (this.historyData.length === 0)
+            return 0;
+        const costs = this.historyData.filter(d => d.avgCost > 0).map(d => d.avgCost);
+        return costs.length > 0 ? costs.reduce((a, b) => a + b, 0) / costs.length : 0;
+    }
+    getTotalRuns() {
+        return this.historyData.reduce((sum, d) => sum + d.runCount, 0);
+    }
+    getPassRateTrend() {
+        if (this.historyData.length < 2)
+            return 'stable';
+        // Compare recent half to older half
+        const mid = Math.floor(this.historyData.length / 2);
+        const recentData = this.historyData.slice(0, mid);
+        const olderData = this.historyData.slice(mid);
+        const recentRate = recentData.reduce((sum, d) => sum + d.passRate, 0) / recentData.length;
+        const olderRate = olderData.reduce((sum, d) => sum + d.passRate, 0) / olderData.length;
+        const diff = recentRate - olderRate;
+        if (diff > 5)
+            return 'up';
+        if (diff < -5)
+            return 'down';
+        return 'stable';
+    }
+    exportHistoryToCSV() {
+        const headers = ['Date', 'Run Count', 'Passed', 'Failed', 'Pass Rate (%)', 'Avg Score', 'Avg Duration (s)', 'Avg Cost (USD)'];
+        const rows = this.historyData.map(d => [
+            d.date.toISOString().split('T')[0],
+            d.runCount.toString(),
+            d.passCount.toString(),
+            d.failCount.toString(),
+            d.passRate.toFixed(1),
+            d.avgScore.toFixed(4),
+            d.avgDuration.toFixed(2),
+            d.avgCost.toFixed(6)
+        ]);
+        const csvContent = [headers, ...rows]
+            .map(row => row.map(cell => `"${cell}"`).join(','))
+            .join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `test-${this.record.ID.substring(0, 8)}-history.csv`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+        SharedService.Instance.CreateSimpleNotification('Export complete', 'success', 2000);
+    }
+    openSuiteFromHistory(suiteId) {
+        SharedService.Instance.OpenEntityRecord('MJ: Test Suites', CompositeKey.FromID(suiteId));
+    }
+    // ===========================
+    // Keyboard Shortcuts Settings
+    // ===========================
+    /**
+     * Load keyboard shortcuts visibility setting from user settings
+     */
+    loadShortcutsSetting() {
+        try {
+            const engine = UserInfoEngine.Instance;
+            const setting = engine.UserSettings.find(s => s.Setting === SHORTCUTS_SETTINGS_KEY);
+            if (setting) {
+                this.shortcutsSettingEntity = setting;
+                this.showShortcuts = setting.Value === 'true';
+            }
+            else {
+                // Default to hidden
+                this.showShortcuts = false;
+            }
+            this.cdr.markForCheck();
+        }
+        catch (error) {
+            console.warn('Failed to load shortcuts setting:', error);
+        }
+    }
+    /**
+     * Toggle keyboard shortcuts visibility and save preference
+     */
+    async toggleShortcuts() {
+        this.showShortcuts = !this.showShortcuts;
+        this.cdr.markForCheck();
+        try {
+            const userId = this.metadata.CurrentUser?.ID;
+            if (!userId)
+                return;
+            if (!this.shortcutsSettingEntity) {
+                const engine = UserInfoEngine.Instance;
+                const setting = engine.UserSettings.find(s => s.Setting === SHORTCUTS_SETTINGS_KEY);
+                if (setting) {
+                    this.shortcutsSettingEntity = setting;
+                }
+                else {
+                    this.shortcutsSettingEntity = await this.metadata.GetEntityObject('MJ: User Settings');
+                    this.shortcutsSettingEntity.UserID = userId;
+                    this.shortcutsSettingEntity.Setting = SHORTCUTS_SETTINGS_KEY;
+                }
+            }
+            this.shortcutsSettingEntity.Value = this.showShortcuts ? 'true' : 'false';
+            await this.shortcutsSettingEntity.Save();
+        }
+        catch (error) {
+            console.warn('Failed to save shortcuts setting:', error);
+        }
+    }
+    static { this.ɵfac = function TestFormComponentExtended_Factory(t) { return new (t || TestFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.TestingDialogService), i0.ɵɵdirectiveInject(i3.EvaluationPreferencesService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestFormComponentExtended, selectors: [["mj-test-form"]], hostBindings: function TestFormComponentExtended_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function TestFormComponentExtended_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, false, i0.ɵɵresolveDocument);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 57, vars: 36, consts: [["kendoDialogContainer", "", 1, "test-form"], [1, "test-header"], [1, "header-content"], [1, "header-left"], [1, "test-icon"], [1, "fas", "fa-flask"], [1, "test-info"], [1, "test-meta"], [1, "status-badge", 3, "ngClass"], [1, "fas", 3, "ngClass"], ["class", "test-type", 4, "ngIf"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "fas", "fa-play"], ["kendoButton", "", 3, "click", "disabled"], ["class", "test-description", 4, "ngIf"], ["class", "metrics-bar", 4, "ngIf"], [1, "tabs-container"], ["role", "tablist", 1, "tabs"], ["role", "tab", 1, "tab", 3, "click"], [1, "fas", "fa-th-large"], [1, "fas", "fa-sliders-h"], [1, "fas", "fa-history"], ["class", "tab-badge", 4, "ngIf"], [1, "fas", "fa-layer-group"], [1, "fas", "fa-chart-line"], [1, "tab-content"], ["class", "overview-tab", 4, "ngIf"], ["class", "config-tab", 4, "ngIf"], ["class", "runs-tab", 4, "ngIf"], ["class", "suites-tab", 4, "ngIf"], ["class", "history-tab", 4, "ngIf"], [1, "shortcuts-toggle", 3, "click", "title"], [1, "fas", "fa-keyboard"], ["class", "keyboard-shortcuts", 4, "ngIf"], [1, "test-type"], [1, "fas", "fa-tag"], [1, "test-description"], [1, "metrics-bar"], [1, "metric-card"], [1, "metric-label"], [1, "metric-value"], [1, "metric-progress"], [1, "metric-progress-fill"], [1, "tab-badge"], [1, "overview-tab"], [1, "info-section"], [1, "fas", "fa-info-circle"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "status-badge-inline", 3, "ngClass"], [1, "json-section"], [1, "fas", "fa-code"], [1, "json-tabs"], [1, "json-tab", 3, "click"], [1, "fas", "fa-sign-in-alt"], [1, "fas", "fa-check-double"], [1, "fas", "fa-cog"], [1, "fas", "fa-tags"], [1, "code-editor-container"], ["language", "json", 3, "value", "readonly", "toolbar", "lineWrapping"], [1, "config-tab"], [1, "config-section"], [1, "fas", "fa-cogs"], [1, "config-grid"], [1, "config-item"], ["type", "number", "placeholder", "Lower = Higher Priority", 1, "config-input", 3, "ngModelChange", "ngModel"], ["type", "number", "min", "1", 1, "config-input", 3, "ngModelChange", "ngModel"], ["type", "number", 1, "config-input", 3, "ngModelChange", "ngModel"], ["type", "number", "step", "0.000001", 1, "config-input", 3, "ngModelChange", "ngModel"], [1, "config-item", "full-width"], ["type", "number", "placeholder", "Default: 300000 (5 min)", 1, "config-input", 3, "ngModelChange", "ngModel"], [1, "config-hint"], [1, "config-editor-container"], ["language", "json", 3, "change", "value", "readonly", "lineWrapping"], [1, "config-editor-container", "small"], [1, "runs-tab"], ["class", "loading-state", 4, "ngIf"], ["class", "runs-list", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "loading-state"], [1, "skeleton-list"], ["class", "skeleton-card", 4, "ngFor", "ngForOf"], [1, "skeleton-card"], [1, "skeleton-icon"], [1, "skeleton-content"], [1, "skeleton-line", "wide"], [1, "skeleton-line", "narrow"], [1, "runs-list"], ["class", "run-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "run-item", 3, "click"], [1, "run-icon"], [1, "fas"], [1, "run-content"], [1, "run-header"], [1, "run-id"], [1, "run-status"], [1, "run-meta"], [1, "fas", "fa-calendar"], [4, "ngIf"], [3, "entityName", "recordId", 4, "ngIf"], [1, "run-eval-stack"], ["class", "eval-pill status-pill", 3, "ngClass", "title", 4, "ngIf"], ["class", "run-tags", 4, "ngIf"], [1, "fas", "fa-chevron-right"], [1, "fas", "fa-clock"], [1, "fas", "fa-dollar-sign"], [3, "entityName", "recordId"], [1, "eval-pill", "status-pill", 3, "ngClass", "title"], ["class", "eval-pill human-pill no-feedback", "title", "Human Review: No rating submitted yet", 4, "ngIf"], ["class", "eval-pill human-pill has-feedback", 3, "rating-low", "rating-medium", "rating-good", "rating-excellent", "title", 4, "ngIf"], ["title", "Human Review: No rating submitted yet", 1, "eval-pill", "human-pill", "no-feedback"], [1, "fas", "fa-user-slash"], [1, "eval-pill", "human-pill", "has-feedback", 3, "title"], [1, "fas", "fa-user"], ["class", "eval-pill auto-pill no-score", "title", "Auto Score: No automated score available", 4, "ngIf"], ["class", "eval-pill auto-pill has-score", 3, "score-low", "score-medium", "score-good", "score-excellent", "title", 4, "ngIf"], ["title", "Auto Score: No automated score available", 1, "eval-pill", "auto-pill", "no-score"], [1, "fas", "fa-robot"], [1, "eval-pill", "auto-pill", "has-score", 3, "title"], [1, "run-tags"], ["class", "run-tag", 4, "ngFor", "ngForOf"], ["class", "run-tag-more", 4, "ngIf"], [1, "run-tag"], [1, "run-tag-more"], [1, "empty-state"], [1, "empty-icon"], [1, "fas", "fa-play-circle"], [1, "suites-tab"], ["class", "suites-list", 4, "ngIf"], [1, "suites-list"], ["class", "suite-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "suite-item", 3, "click"], [1, "suite-icon"], [1, "suite-content"], [1, "suite-name"], [1, "suite-meta"], [1, "fas", "fa-sort-numeric-up"], [1, "fas", "fa-folder-open"], [1, "history-tab"], ["class", "history-content", 4, "ngIf"], ["text", "Loading history..."], [1, "history-content"], [1, "history-filters"], [1, "time-range-filters"], [1, "filter-label"], [1, "filter-btn", 3, "click"], [1, "history-actions"], [1, "fas", "fa-download"], ["class", "history-kpi-cards", 4, "ngIf"], ["class", "history-section", 4, "ngIf"], [1, "history-kpi-cards"], [1, "kpi-card"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], ["class", "kpi-card", 4, "ngIf"], [1, "kpi-icon", "pass-rate"], [1, "fas", "fa-percentage"], [1, "fas", "trend-icon"], [1, "fas", "fa-star"], [1, "history-section"], [1, "fas", "fa-calendar-alt"], [1, "history-table-container"], [1, "history-table"], [4, "ngFor", "ngForOf"], [1, "date-cell"], [1, "runs-cell"], ["class", "passed-cell", 4, "ngIf"], ["class", "failed-cell", 4, "ngIf"], ["class", "pass-rate-cell", 4, "ngIf"], ["class", "score-cell", 4, "ngIf"], [1, "duration-cell"], [1, "cost-cell"], [1, "passed-cell"], [1, "failed-cell"], [1, "pass-rate-cell"], [1, "pass-rate-bar"], [1, "pass-rate-fill"], [1, "pass-rate-text"], [1, "score-cell"], [1, "suite-performance-list"], ["class", "suite-perf-card", 3, "click", 4, "ngFor", "ngForOf"], [1, "suite-perf-card", 3, "click"], [1, "suite-perf-header"], [1, "suite-perf-name"], ["class", "suite-perf-tags", 4, "ngIf"], [1, "suite-perf-stats"], [1, "suite-stat"], [1, "stat-value"], [1, "stat-label"], ["class", "suite-stat", 4, "ngIf"], [1, "fas", "fa-chevron-right", "suite-perf-arrow"], [1, "suite-perf-tags"], ["class", "tag-mini", 4, "ngFor", "ngForOf"], ["class", "tag-more", 4, "ngIf"], [1, "tag-mini"], [1, "tag-more"], [1, "stat-value", "pass-rate"], [1, "keyboard-shortcuts"], [1, "shortcuts-header"], ["title", "Hide shortcuts", 1, "shortcuts-close", 3, "click"], [1, "fas", "fa-times"], [1, "shortcut-list"], [1, "shortcut-item"], [1, "shortcut-keys"]], template: function TestFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵelement(5, "i", 5);
             i0.ɵɵelementEnd();
@@ -623,80 +1838,108 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
             i0.ɵɵelement(11, "i", 9);
             i0.ɵɵtext(12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "span", 10);
-            i0.ɵɵtext(14);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
+            i0.ɵɵtemplate(13, TestFormComponentExtended_span_13_Template, 3, 1, "span", 10);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(14, "div", 11);
+            i0.ɵɵelement(15, "app-evaluation-mode-toggle");
+            i0.ɵɵelementStart(16, "button", 12);
             i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_16_listener() { return ctx.runTest(); });
-            i0.ɵɵtext(17, " Run Test ");
+            i0.ɵɵelement(17, "i", 13);
+            i0.ɵɵtext(18, " Run Test ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "button", 13);
-            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_18_listener() { return ctx.refresh(); });
-            i0.ɵɵtext(19, " Refresh ");
+            i0.ɵɵelementStart(19, "button", 14);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_19_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(20, "i", 9);
+            i0.ɵɵtext(21);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(20, TestFormComponentExtended_div_20_Template, 3, 1, "div", 14)(21, TestFormComponentExtended_div_21_Template, 21, 4, "div", 15);
+            i0.ɵɵtemplate(22, TestFormComponentExtended_div_22_Template, 3, 1, "div", 15)(23, TestFormComponentExtended_div_23_Template, 23, 6, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 16)(23, "div", 17)(24, "button", 18);
-            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_24_listener() { return ctx.changeTab("overview"); });
-            i0.ɵɵelement(25, "i", 19);
-            i0.ɵɵelementStart(26, "span");
-            i0.ɵɵtext(27, "Overview");
+            i0.ɵɵelementStart(24, "div", 17)(25, "div", 18)(26, "button", 19);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_26_listener() { return ctx.changeTab("overview"); });
+            i0.ɵɵelement(27, "i", 20);
+            i0.ɵɵelementStart(28, "span");
+            i0.ɵɵtext(29, "Overview");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(28, "button", 18);
-            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_28_listener() { return ctx.changeTab("config"); });
-            i0.ɵɵelement(29, "i", 20);
-            i0.ɵɵelementStart(30, "span");
-            i0.ɵɵtext(31, "Configuration");
+            i0.ɵɵelementStart(30, "button", 19);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_30_listener() { return ctx.changeTab("config"); });
+            i0.ɵɵelement(31, "i", 21);
+            i0.ɵɵelementStart(32, "span");
+            i0.ɵɵtext(33, "Configuration");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(32, "button", 18);
-            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_32_listener() { return ctx.changeTab("runs"); });
-            i0.ɵɵelement(33, "i", 21);
-            i0.ɵɵelementStart(34, "span");
-            i0.ɵɵtext(35, "Test Runs");
+            i0.ɵɵelementStart(34, "button", 19);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_34_listener() { return ctx.changeTab("runs"); });
+            i0.ɵɵelement(35, "i", 22);
+            i0.ɵɵelementStart(36, "span");
+            i0.ɵɵtext(37, "Runs");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(36, TestFormComponentExtended_span_36_Template, 2, 1, "span", 22);
+            i0.ɵɵtemplate(38, TestFormComponentExtended_span_38_Template, 2, 1, "span", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "button", 18);
-            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_37_listener() { return ctx.changeTab("suites"); });
-            i0.ɵɵelement(38, "i", 23);
-            i0.ɵɵelementStart(39, "span");
-            i0.ɵɵtext(40, "Test Suites");
+            i0.ɵɵelementStart(39, "button", 19);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_39_listener() { return ctx.changeTab("suites"); });
+            i0.ɵɵelement(40, "i", 24);
+            i0.ɵɵelementStart(41, "span");
+            i0.ɵɵtext(42, "Test Suites");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(43, TestFormComponentExtended_span_43_Template, 2, 1, "span", 23);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(44, "button", 19);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_44_listener() { return ctx.changeTab("analytics"); });
+            i0.ɵɵelement(45, "i", 25);
+            i0.ɵɵelementStart(46, "span");
+            i0.ɵɵtext(47, "Analytics");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(48, "div", 26);
+            i0.ɵɵtemplate(49, TestFormComponentExtended_div_49_Template, 78, 29, "div", 27)(50, TestFormComponentExtended_div_50_Template, 52, 17, "div", 28)(51, TestFormComponentExtended_div_51_Template, 4, 3, "div", 29)(52, TestFormComponentExtended_div_52_Template, 4, 3, "div", 30)(53, TestFormComponentExtended_div_53_Template, 3, 2, "div", 31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(54, "button", 32);
+            i0.ɵɵlistener("click", function TestFormComponentExtended_Template_button_click_54_listener() { return ctx.toggleShortcuts(); });
+            i0.ɵɵelement(55, "i", 33);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(56, TestFormComponentExtended_div_56_Template, 32, 0, "div", 34);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(41, TestFormComponentExtended_span_41_Template, 2, 1, "span", 22);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(42, "div", 24);
-            i0.ɵɵtemplate(43, TestFormComponentExtended_div_43_Template, 62, 22, "div", 25)(44, TestFormComponentExtended_div_44_Template, 37, 8, "div", 26)(45, TestFormComponentExtended_div_45_Template, 3, 2, "div", 27)(46, TestFormComponentExtended_div_46_Template, 3, 2, "div", 28);
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(4);
             i0.ɵɵstyleProp("background-color", ctx.getStatusColor());
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.record.Name);
             i0.ɵɵadvance(2);
-            i0.ɵɵstyleProp("background-color", ctx.getStatusColor());
+            i0.ɵɵproperty("ngClass", ctx.getStatusClass());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getStatusIcon());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.record.Status, " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(ctx.record.Type);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.record.Type);
             i0.ɵɵadvance(6);
+            i0.ɵɵproperty("disabled", ctx.isRefreshing);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.isRefreshing ? "fa-sync fa-spin" : "fa-sync");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.isRefreshing ? "Refreshing..." : "Refresh", " ");
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record.Description);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.testRunsLoaded && ctx.testRuns.length > 0);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === "overview");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "overview");
             i0.ɵɵadvance(4);
             i0.ɵɵclassProp("active", ctx.activeTab === "config");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "config");
             i0.ɵɵadvance(4);
             i0.ɵɵclassProp("active", ctx.activeTab === "runs");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "runs");
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.testRunsLoaded);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("active", ctx.activeTab === "suites");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "suites");
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.suiteTestsLoaded);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("active", ctx.activeTab === "analytics");
+            i0.ɵɵattribute("aria-selected", ctx.activeTab === "analytics");
+            i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.activeTab === "overview");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.activeTab === "config");
@@ -704,7 +1947,13 @@ let TestFormComponentExtended = class TestFormComponentExtended extends TestForm
             i0.ɵɵproperty("ngIf", ctx.activeTab === "runs");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.activeTab === "suites");
-        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NumberValueAccessor, i5.NgControlStatus, i5.NgModel, i6.DialogContainerDirective, i7.ButtonComponent, i4.JsonPipe, i4.DatePipe], styles: [".test-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n\n\n.test-header[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n}\n\n.test-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 24px;\n}\n\n.test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n\n.test-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: 12px;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.test-type[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.test-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 16px;\n}\n\n.test-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: #666;\n  line-height: 1.5;\n}\n\n.metrics-bar[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 16px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  background: #f5f7fa;\n  border-radius: 8px;\n  padding: 12px;\n  text-align: center;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #999;\n  margin-bottom: 4px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n}\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: #2196f3;\n  background: rgba(33, 150, 243, 0.05);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: #e0e0e0;\n  color: #666;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n  color: #2196f3;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.info-section[_ngcontent-%COMP%], \n.json-section[_ngcontent-%COMP%], \n.config-section[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 20px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.info-grid[_ngcontent-%COMP%], \n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%], \n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%], \n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #999;\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #333;\n  word-wrap: break-word;\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n.json-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n  border-bottom: 2px solid #e0e0e0;\n}\n\n.json-tab[_ngcontent-%COMP%] {\n  padding: 10px 20px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 3px solid transparent;\n  margin-bottom: -2px;\n  transition: all 0.2s ease;\n}\n\n.json-tab[_ngcontent-%COMP%]:hover {\n  color: #2196f3;\n}\n\n.json-tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n}\n\n.json-content[_ngcontent-%COMP%] {\n  background: #1e1e1e;\n  border-radius: 8px;\n  padding: 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.json-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  margin: 0;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #e0e0e0;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.json-editor[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  resize: vertical;\n}\n\n.json-editor[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n\n\n.runs-list[_ngcontent-%COMP%], \n.suites-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.run-item[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  background: white;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-item[_ngcontent-%COMP%]:hover, \n.suite-item[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n  border-color: #90caf9;\n}\n\n.run-icon[_ngcontent-%COMP%], \n.suite-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  color: white;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  background: #ff9800;\n}\n\n.run-content[_ngcontent-%COMP%], \n.suite-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.run-header[_ngcontent-%COMP%], \n.suite-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  margin-right: 12px;\n}\n\n.run-status[_ngcontent-%COMP%] {\n  font-weight: 700;\n}\n\n.run-meta[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: #666;\n}\n\n.run-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: #999;\n  font-size: 14px;\n}\n\n\n\n.no-data[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: #999;\n  text-align: center;\n  background: white;\n  border-radius: 12px;\n}\n\n.no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n@media (max-width: 1200px) {\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid[_ngcontent-%COMP%], \n   .config-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 768px) {\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    overflow-x: auto;\n  }\n}"], changeDetection: 0 }); }
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.activeTab === "analytics");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("title", ctx.showShortcuts ? "Hide keyboard shortcuts" : "Show keyboard shortcuts");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.showShortcuts);
+        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NumberValueAccessor, i5.NgControlStatus, i5.MinValidator, i5.NgModel, i6.DialogContainerDirective, i7.ButtonComponent, i8.CodeEditorComponent, i3.EvaluationModeToggleComponent, i9.LoadingComponent, i10.EntityLinkPillComponent, i4.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  --test-primary: #2563eb;\n  --test-primary-light: #3b82f6;\n  --test-primary-dark: #1d4ed8;\n  --test-success: #10b981;\n  --test-success-light: #d1fae5;\n  --test-error: #ef4444;\n  --test-error-light: #fee2e2;\n  --test-warning: #f59e0b;\n  --test-warning-light: #fef3c7;\n  --test-disabled: #6b7280;\n  --test-bg: #f8fafc;\n  --test-surface: #ffffff;\n  --test-border: #e2e8f0;\n  --test-text: #1e293b;\n  --test-text-secondary: #64748b;\n  --test-text-muted: #94a3b8;\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --test-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --test-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n\n\n.test-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n\n.test-header[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.test-icon[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.test-icon[_ngcontent-%COMP%]:hover {\n  transform: scale(1.05);\n}\n\n\n\n.test-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n  word-wrap: break-word;\n}\n\n.test-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] { background: linear-gradient(135deg, var(--test-success) 0%, #059669 100%); }\n.status-badge.status-disabled[_ngcontent-%COMP%] { background: linear-gradient(135deg, var(--test-disabled) 0%, #4b5563 100%); }\n.status-badge.status-pending[_ngcontent-%COMP%] { background: linear-gradient(135deg, var(--test-warning) 0%, #d97706 100%); }\n\n.status-badge-inline[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active[_ngcontent-%COMP%] { background: var(--test-success); }\n.status-badge-inline.status-disabled[_ngcontent-%COMP%] { background: var(--test-disabled); }\n.status-badge-inline.status-pending[_ngcontent-%COMP%] { background: var(--test-warning); }\n\n.test-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  white-space: nowrap;\n}\n\n\n\n.test-description[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: var(--test-radius-md);\n  margin-bottom: 16px;\n  border: 1px solid var(--test-border);\n}\n\n.test-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n\n\n\n\n.metrics-bar[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 14px;\n  text-align: center;\n  transition: var(--test-transition);\n}\n\n.metric-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  margin-bottom: 6px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n\n\n.metric-progress[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  height: 4px;\n  background: var(--test-border);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.metric-progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: linear-gradient(90deg, var(--test-success) 0%, #34d399 100%);\n  border-radius: 2px;\n  transition: width 0.5s ease-out;\n}\n\n\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.tab[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-primary);\n  background: rgba(37, 99, 235, 0.05);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 15px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.tab.active[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  background: rgba(37, 99, 235, 0.15);\n  color: var(--test-primary);\n}\n\n.tab-shortcut[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  margin-left: 4px;\n}\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  scroll-behavior: smooth;\n}\n\n\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n.info-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--test-text);\n  word-wrap: break-word;\n  font-weight: 500;\n}\n\n\n\n.json-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.json-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 16px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n  flex-wrap: wrap;\n}\n\n.json-tab[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 100px;\n  padding: 10px 14px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: var(--test-radius-sm);\n  transition: var(--test-transition);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.json-tab[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.json-tab.active[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  font-weight: 600;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n  max-height: 400px;\n}\n\n\n\n\n\n.config-tab[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.config-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.config-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n.config-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.config-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input[_ngcontent-%COMP%] {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n  background: var(--test-surface);\n}\n\n.config-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.config-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--test-text-muted);\n}\n\n.config-hint[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--test-text-muted);\n  margin-top: 4px;\n}\n\n.config-editor-container[_ngcontent-%COMP%] {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n}\n\n.config-editor-container.small[_ngcontent-%COMP%] {\n  min-height: 100px;\n  max-height: 150px;\n}\n\n\n\n\n\n.runs-tab[_ngcontent-%COMP%], \n.suites-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.skeleton-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n  flex-shrink: 0;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n\n\n.runs-list[_ngcontent-%COMP%], \n.suites-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.run-item[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover, \n.suite-item[_ngcontent-%COMP%]:hover {\n  background: rgba(37, 99, 235, 0.05);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.run-icon[_ngcontent-%COMP%], \n.suite-icon[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: white;\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.suite-icon[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.run-content[_ngcontent-%COMP%], \n.suite-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 4px;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-status[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.suite-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  flex-wrap: wrap;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.suite-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 11px;\n}\n\n.run-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.run-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%], \n.suite-item[_ngcontent-%COMP%]:hover    > i.fa-chevron-right[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n.run-eval-stack[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n\n\n.eval-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.eval-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.eval-pill.status-pill.status-passed[_ngcontent-%COMP%] {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n.eval-pill.status-pill.status-failed[_ngcontent-%COMP%] {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.status-pill.status-error[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.status-pill.status-timeout[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.status-pill.status-skipped[_ngcontent-%COMP%], \n.eval-pill.status-pill.status-pending[_ngcontent-%COMP%] {\n  background: #f1f5f9;\n  color: #64748b;\n}\n\n.eval-pill.status-pill.status-running[_ngcontent-%COMP%] {\n  background: #dbeafe;\n  color: #2563eb;\n}\n\n\n\n.eval-pill.human-pill.no-feedback[_ngcontent-%COMP%] {\n  background: #f1f5f9;\n  color: #94a3b8;\n  padding: 4px 8px;\n}\n\n.eval-pill.human-pill.has-feedback.rating-low[_ngcontent-%COMP%] {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.human-pill.has-feedback.rating-medium[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.human-pill.has-feedback.rating-good[_ngcontent-%COMP%] {\n  background: #d1fae5;\n  color: #059669;\n}\n\n.eval-pill.human-pill.has-feedback.rating-excellent[_ngcontent-%COMP%] {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n\n\n.eval-pill.auto-pill.no-score[_ngcontent-%COMP%] {\n  background: #f1f5f9;\n  color: #94a3b8;\n  padding: 4px 8px;\n}\n\n.eval-pill.auto-pill.has-score.score-low[_ngcontent-%COMP%] {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.auto-pill.has-score.score-medium[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.auto-pill.has-score.score-good[_ngcontent-%COMP%] {\n  background: #d1fae5;\n  color: #059669;\n}\n\n.eval-pill.auto-pill.has-score.score-excellent[_ngcontent-%COMP%] {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n\n\n.run-tags[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-tag[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: rgba(37, 99, 235, 0.1);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.run-tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n\n\n.no-data[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--test-text-muted);\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n\n\n\n\n.shortcuts-toggle[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close[_ngcontent-%COMP%]:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.shortcut-keys[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .config-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .keyboard-shortcuts[_ngcontent-%COMP%], .shortcuts-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n  .test-form[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 100%;\n  }\n\n  .test-header[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 20px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 18px;\n  }\n\n  .test-meta[_ngcontent-%COMP%] {\n    gap: 8px;\n  }\n\n  .status-badge[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    font-size: 11px;\n  }\n\n  .header-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n  }\n\n  .metric-card[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .metric-value[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 12px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 12px 14px;\n    font-size: 13px;\n    gap: 6px;\n  }\n\n  .tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n\n  .tab-shortcut[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .json-tabs[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .json-tab[_ngcontent-%COMP%] {\n    min-width: 0;\n    justify-content: flex-start;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    padding: 14px;\n  }\n\n  .run-icon[_ngcontent-%COMP%], \n   .suite-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 16px;\n  }\n\n  .run-meta[_ngcontent-%COMP%], \n   .suite-meta[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .empty-state[_ngcontent-%COMP%] {\n    padding: 40px 20px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%] {\n    width: 64px;\n    height: 64px;\n  }\n\n  .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 28px;\n  }\n}\n\n\n\n\n\n@media (max-width: 480px) {\n  .test-header[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .header-left[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n\n  .test-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n    border-radius: 8px;\n  }\n\n  .test-info[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 16px;\n  }\n\n  .metrics-bar[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .tabs[_ngcontent-%COMP%] {\n    padding: 0 8px;\n  }\n\n  .tab[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n\n  .tab-badge[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .run-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n}\n\n\n\n\n\n@media (hover: none) and (pointer: coarse) {\n  .tab[_ngcontent-%COMP%], \n   .json-tab[_ngcontent-%COMP%], \n   .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .run-item[_ngcontent-%COMP%]:active, \n   .suite-item[_ngcontent-%COMP%]:active {\n    background: rgba(37, 99, 235, 0.1);\n    transform: scale(0.98);\n  }\n\n  .tab[_ngcontent-%COMP%]:active, \n   .json-tab[_ngcontent-%COMP%]:active {\n    background: rgba(37, 99, 235, 0.1);\n  }\n\n  \n\n  .tab[_ngcontent-%COMP%] {\n    min-height: 48px;\n  }\n\n  .run-item[_ngcontent-%COMP%], \n   .suite-item[_ngcontent-%COMP%] {\n    min-height: 64px;\n  }\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  .skeleton-icon[_ngcontent-%COMP%], \n   .skeleton-line[_ngcontent-%COMP%] {\n    animation: none;\n    background: #e2e8f0;\n  }\n}\n\n\n\n\n\n.history-tab[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.history-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n\n\n.history-filters[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.time-range-filters[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  margin-right: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--test-primary-light);\n  color: var(--test-primary);\n  background: rgba(37, 99, 235, 0.05);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--test-primary);\n  color: white;\n  border-color: var(--test-primary);\n}\n\n.history-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n\n.history-kpi-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n  border-radius: var(--test-radius-md);\n  color: white;\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.kpi-icon.pass-rate[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--test-success) 0%, #059669 100%);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 2px;\n}\n\n.trend-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.trend-icon.trend-up[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.trend-icon.trend-down[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n\n\n.history-section[_ngcontent-%COMP%] {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.history-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n}\n\n\n\n.history-table-container[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.history-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 14px;\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.history-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  text-align: left;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.history-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n}\n\n.history-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background: rgba(37, 99, 235, 0.03);\n}\n\n.date-cell[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.passed-cell[_ngcontent-%COMP%] {\n  color: var(--test-success);\n  font-weight: 600;\n}\n\n.failed-cell[_ngcontent-%COMP%] {\n  color: var(--test-error);\n  font-weight: 600;\n}\n\n.pass-rate-cell[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.pass-rate-bar[_ngcontent-%COMP%] {\n  position: relative;\n  height: 24px;\n  background: var(--test-bg);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pass-rate-fill[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: linear-gradient(90deg, var(--test-success) 0%, #34d399 100%);\n  border-radius: 12px;\n  transition: width 0.5s ease-out;\n}\n\n.pass-rate-text[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--test-text);\n  z-index: 1;\n}\n\n\n\n.suite-performance-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.suite-perf-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 18px;\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover {\n  background: rgba(37, 99, 235, 0.05);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.suite-perf-header[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-perf-name[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 6px;\n}\n\n.suite-perf-tags[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.tag-mini[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: rgba(37, 99, 235, 0.1);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.tag-more[_ngcontent-%COMP%] {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.suite-perf-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n\n.suite-stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.high[_ngcontent-%COMP%] {\n  color: var(--test-success);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-value.pass-rate.low[_ngcontent-%COMP%] {\n  color: var(--test-error);\n}\n\n.suite-stat[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card[_ngcontent-%COMP%]:hover   .suite-perf-arrow[_ngcontent-%COMP%] {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n\n\n\n\n@media print {\n  .test-form[_ngcontent-%COMP%] {\n    background: white;\n    height: auto;\n  }\n\n  .header-actions[_ngcontent-%COMP%], \n   .tabs-container[_ngcontent-%COMP%], \n   .keyboard-shortcuts[_ngcontent-%COMP%] {\n    display: none !important;\n  }\n\n  .tab-content[_ngcontent-%COMP%] {\n    overflow: visible;\n    padding: 0;\n  }\n\n  .info-section[_ngcontent-%COMP%], \n   .json-section[_ngcontent-%COMP%], \n   .config-section[_ngcontent-%COMP%], \n   .empty-state[_ngcontent-%COMP%] {\n    break-inside: avoid;\n    box-shadow: none;\n    border: 1px solid #ddd;\n  }\n}"], changeDetection: 0 }); }
 };
 TestFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Tests')
@@ -712,9 +1961,12 @@ TestFormComponentExtended = __decorate([
 export { TestFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestFormComponentExtended, [{
         type: Component,
-        args: [{ selector: 'mj-test-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-form\" kendoDialogContainer>\n  <!-- Header Section -->\n  <div class=\"test-header\">\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <div class=\"test-icon\" [style.background-color]=\"getStatusColor()\">\n          <i class=\"fas fa-flask\"></i>\n        </div>\n        <div class=\"test-info\">\n          <h1>{{ record.Name }}</h1>\n          <div class=\"test-meta\">\n            <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n              <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n              {{ record.Status }}\n            </span>\n            <span class=\"test-type\">{{ record.Type }}</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        <button kendoButton (click)=\"runTest()\" icon=\"play\">\n          Run Test\n        </button>\n        <button kendoButton (click)=\"refresh()\" icon=\"sync\">\n          Refresh\n        </button>\n      </div>\n    </div>\n\n    <!-- Test Description -->\n    <div class=\"test-description\" *ngIf=\"record.Description\">\n      <p>{{ record.Description }}</p>\n    </div>\n\n    <!-- Metrics Bar -->\n    <div class=\"metrics-bar\" *ngIf=\"testRunsLoaded && testRuns.length > 0\">\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Total Runs</div>\n        <div class=\"metric-value\">{{ testRuns.length }}</div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Pass Rate</div>\n        <div class=\"metric-value\">{{ getPassRate().toFixed(1) }}%</div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Avg Cost</div>\n        <div class=\"metric-value\">{{ formatCost(getAverageCost()) }}</div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Avg Duration</div>\n        <div class=\"metric-value\">{{ formatDuration(getAverageDuration()) }}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs-container\">\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'overview'\" (click)=\"changeTab('overview')\">\n        <i class=\"fas fa-th-large\"></i>\n        <span>Overview</span>\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'config'\" (click)=\"changeTab('config')\">\n        <i class=\"fas fa-sliders-h\"></i>\n        <span>Configuration</span>\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'runs'\" (click)=\"changeTab('runs')\">\n        <i class=\"fas fa-list\"></i>\n        <span>Test Runs</span>\n        <span class=\"tab-badge\" *ngIf=\"testRunsLoaded\">{{ testRuns.length }}</span>\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'suites'\" (click)=\"changeTab('suites')\">\n        <i class=\"fas fa-layer-group\"></i>\n        <span>Test Suites</span>\n        <span class=\"tab-badge\" *ngIf=\"suiteTestsLoaded\">{{ suiteTests.length }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\">\n    <!-- Overview Tab -->\n    <div class=\"overview-tab\" *ngIf=\"activeTab === 'overview'\">\n      <!-- Basic Information -->\n      <div class=\"info-section\">\n        <h3>Test Information</h3>\n        <div class=\"info-grid\">\n          <div class=\"info-item\">\n            <div class=\"info-label\">Name</div>\n            <div class=\"info-value\">{{ record.Name }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Type</div>\n            <div class=\"info-value\">{{ record.Type }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Status</div>\n            <div class=\"info-value\">{{ record.Status }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Priority</div>\n            <div class=\"info-value\">{{ record.Priority || 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Estimated Duration</div>\n            <div class=\"info-value\">{{ record.EstimatedDurationSeconds ? formatDuration(record.EstimatedDurationSeconds) : 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Estimated Cost</div>\n            <div class=\"info-value\">{{ record.EstimatedCostUSD ? formatCost(record.EstimatedCostUSD) : 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Repeat Count</div>\n            <div class=\"info-value\">{{ record.RepeatCount || 1 }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Created</div>\n            <div class=\"info-value\">{{ record.__mj_CreatedAt | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- JSON Data Views -->\n      <div class=\"json-section\">\n        <h3>Test Definition</h3>\n        <div class=\"json-tabs\">\n          <button class=\"json-tab\" [class.active]=\"activeJsonView === 'input'\" (click)=\"setJsonView('input')\">\n            Input Definition\n          </button>\n          <button class=\"json-tab\" [class.active]=\"activeJsonView === 'expected'\" (click)=\"setJsonView('expected')\">\n            Expected Outcomes\n          </button>\n          <button class=\"json-tab\" [class.active]=\"activeJsonView === 'config'\" (click)=\"setJsonView('config')\">\n            Configuration\n          </button>\n          <button class=\"json-tab\" [class.active]=\"activeJsonView === 'tags'\" (click)=\"setJsonView('tags')\">\n            Tags\n          </button>\n        </div>\n        <div class=\"json-content\">\n          <pre>{{ getJsonData() | json }}</pre>\n        </div>\n      </div>\n    </div>\n\n    <!-- Configuration Tab -->\n    <div class=\"config-tab\" *ngIf=\"activeTab === 'config'\">\n      <div class=\"config-section\">\n        <h3>Execution Settings</h3>\n        <div class=\"config-grid\">\n          <div class=\"config-item\">\n            <label>Priority</label>\n            <input type=\"number\" [(ngModel)]=\"record.Priority\" class=\"config-input\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Repeat Count</label>\n            <input type=\"number\" [(ngModel)]=\"record.RepeatCount\" class=\"config-input\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Estimated Duration (seconds)</label>\n            <input type=\"number\" [(ngModel)]=\"record.EstimatedDurationSeconds\" class=\"config-input\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Estimated Cost (USD)</label>\n            <input type=\"number\" step=\"0.000001\" [(ngModel)]=\"record.EstimatedCostUSD\" class=\"config-input\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"config-section\">\n        <h3>Input Definition (JSON)</h3>\n        <textarea class=\"json-editor\" [(ngModel)]=\"record.InputDefinition\" rows=\"10\"></textarea>\n      </div>\n\n      <div class=\"config-section\">\n        <h3>Expected Outcomes (JSON)</h3>\n        <textarea class=\"json-editor\" [(ngModel)]=\"record.ExpectedOutcomes\" rows=\"10\"></textarea>\n      </div>\n\n      <div class=\"config-section\">\n        <h3>Configuration (JSON)</h3>\n        <textarea class=\"json-editor\" [(ngModel)]=\"record.Configuration\" rows=\"10\"></textarea>\n      </div>\n\n      <div class=\"config-section\">\n        <h3>Tags (JSON Array)</h3>\n        <textarea class=\"json-editor\" [(ngModel)]=\"record.Tags\" rows=\"5\"></textarea>\n      </div>\n    </div>\n\n    <!-- Test Runs Tab -->\n    <div class=\"runs-tab\" *ngIf=\"activeTab === 'runs'\">\n      <div class=\"runs-list\" *ngIf=\"testRuns.length > 0\">\n        <div class=\"run-item\" *ngFor=\"let run of testRuns\" (click)=\"openTestRun(run.ID)\">\n          <div class=\"run-icon\" [style.background-color]=\"run.Status === 'Passed' ? '#4caf50' : run.Status === 'Failed' ? '#f44336' : '#ff9800'\">\n            <i class=\"fas\" [class.fa-check]=\"run.Status === 'Passed'\" [class.fa-times]=\"run.Status === 'Failed'\" [class.fa-exclamation]=\"run.Status === 'Error'\"></i>\n          </div>\n          <div class=\"run-content\">\n            <div class=\"run-header\">\n              <span class=\"run-id\">Run #{{ run.ID.substring(0, 8) }}</span>\n              <span class=\"run-status\" [style.color]=\"run.Status === 'Passed' ? '#4caf50' : run.Status === 'Failed' ? '#f44336' : '#ff9800'\">{{ run.Status }}</span>\n            </div>\n            <div class=\"run-meta\">\n              <span>{{ run.StartedAt | date:'short' }}</span>\n              <span *ngIf=\"run.DurationSeconds\">{{ formatDuration(run.DurationSeconds) }}</span>\n              <span *ngIf=\"run.CostUSD\">{{ formatCost(run.CostUSD) }}</span>\n              <span *ngIf=\"run.Score != null\">Score: {{ run.Score.toFixed(4) }}</span>\n            </div>\n          </div>\n          <i class=\"fas fa-chevron-right\"></i>\n        </div>\n      </div>\n\n      <div class=\"no-data\" *ngIf=\"testRunsLoaded && testRuns.length === 0\">\n        <i class=\"fas fa-inbox\"></i>\n        <p>No test runs found for this test</p>\n      </div>\n    </div>\n\n    <!-- Test Suites Tab -->\n    <div class=\"suites-tab\" *ngIf=\"activeTab === 'suites'\">\n      <div class=\"suites-list\" *ngIf=\"suiteTests.length > 0\">\n        <div class=\"suite-item\" *ngFor=\"let suiteTest of suiteTests\" (click)=\"openTestSuite(suiteTest.SuiteID)\">\n          <div class=\"suite-icon\">\n            <i class=\"fas fa-folder\"></i>\n          </div>\n          <div class=\"suite-content\">\n            <div class=\"suite-name\">{{ suiteTest.Suite }}</div>\n            <div class=\"suite-meta\">\n              <span>Sequence: {{ suiteTest.Sequence }}</span>\n            </div>\n          </div>\n          <i class=\"fas fa-chevron-right\"></i>\n        </div>\n      </div>\n\n      <div class=\"no-data\" *ngIf=\"suiteTestsLoaded && suiteTests.length === 0\">\n        <i class=\"fas fa-inbox\"></i>\n        <p>This test is not part of any test suite</p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".test-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n/* Header */\n.test-header {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 20px;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  gap: 16px;\n}\n\n.test-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 24px;\n}\n\n.test-info h1 {\n  margin: 0 0 8px 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n\n.test-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 12px;\n  border-radius: 12px;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.test-type {\n  font-size: 14px;\n  color: #666;\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.test-description {\n  padding: 16px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 16px;\n}\n\n.test-description p {\n  margin: 0;\n  color: #666;\n  line-height: 1.5;\n}\n\n.metrics-bar {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 16px;\n}\n\n.metric-card {\n  background: #f5f7fa;\n  border-radius: 8px;\n  padding: 12px;\n  text-align: center;\n}\n\n.metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #999;\n  margin-bottom: 4px;\n}\n\n.metric-value {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n}\n\n/* Tabs */\n.tabs-container {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.tabs {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.tab:hover {\n  color: #2196f3;\n  background: rgba(33, 150, 243, 0.05);\n}\n\n.tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n}\n\n.tab i {\n  font-size: 16px;\n}\n\n.tab-badge {\n  background: #e0e0e0;\n  color: #666;\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.tab.active .tab-badge {\n  background: #e3f2fd;\n  color: #2196f3;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Overview Tab */\n.overview-tab {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.info-section,\n.json-section,\n.config-section {\n  background: white;\n  border-radius: 12px;\n  padding: 20px;\n}\n\n.info-section h3,\n.json-section h3,\n.config-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.info-grid,\n.config-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.info-item,\n.config-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.info-label,\n.config-item label {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #999;\n}\n\n.info-value {\n  font-size: 14px;\n  color: #333;\n  word-wrap: break-word;\n}\n\n.config-input {\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.config-input:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n.json-tabs {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n  border-bottom: 2px solid #e0e0e0;\n}\n\n.json-tab {\n  padding: 10px 20px;\n  border: none;\n  background: transparent;\n  color: #666;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 3px solid transparent;\n  margin-bottom: -2px;\n  transition: all 0.2s ease;\n}\n\n.json-tab:hover {\n  color: #2196f3;\n}\n\n.json-tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n}\n\n.json-content {\n  background: #1e1e1e;\n  border-radius: 8px;\n  padding: 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.json-content pre {\n  margin: 0;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #e0e0e0;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.json-editor {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  resize: vertical;\n}\n\n.json-editor:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n/* Runs Tab */\n.runs-list,\n.suites-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.run-item,\n.suite-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  background: white;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-item:hover,\n.suite-item:hover {\n  background: #e3f2fd;\n  border-color: #90caf9;\n}\n\n.run-icon,\n.suite-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  color: white;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n\n.suite-icon {\n  background: #ff9800;\n}\n\n.run-content,\n.suite-content {\n  flex: 1;\n}\n\n.run-header,\n.suite-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n\n.run-id {\n  margin-right: 12px;\n}\n\n.run-status {\n  font-weight: 700;\n}\n\n.run-meta,\n.suite-meta {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: #666;\n}\n\n.run-item > i,\n.suite-item > i {\n  color: #999;\n  font-size: 14px;\n}\n\n/* No Data State */\n.no-data {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: #999;\n  text-align: center;\n  background: white;\n  border-radius: 12px;\n}\n\n.no-data i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.no-data p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n  .metrics-bar {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid,\n  .config-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n@media (max-width: 768px) {\n  .metrics-bar {\n    grid-template-columns: 1fr;\n  }\n\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .tabs {\n    overflow-x: auto;\n  }\n}\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.TestingDialogService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestFormComponentExtended, { className: "TestFormComponentExtended", filePath: "src/lib/custom/Tests/test-form.component.ts", lineNumber: 27 }); })();
+        args: [{ selector: 'mj-test-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-form\" kendoDialogContainer>\n  <!-- Header Section -->\n  <div class=\"test-header\">\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <div class=\"test-icon\" [style.background-color]=\"getStatusColor()\">\n          <i class=\"fas fa-flask\"></i>\n        </div>\n        <div class=\"test-info\">\n          <h1>{{ record.Name }}</h1>\n          <div class=\"test-meta\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass()\">\n              <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n              {{ record.Status }}\n            </span>\n            <span class=\"test-type\" *ngIf=\"record.Type\">\n              <i class=\"fas fa-tag\"></i>\n              {{ record.Type }}\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        <app-evaluation-mode-toggle></app-evaluation-mode-toggle>\n        <button kendoButton (click)=\"runTest()\" themeColor=\"primary\">\n          <i class=\"fas fa-play\"></i> Run Test\n        </button>\n        <button kendoButton (click)=\"refresh()\" [disabled]=\"isRefreshing\">\n          <i class=\"fas\" [ngClass]=\"isRefreshing ? 'fa-sync fa-spin' : 'fa-sync'\"></i>\n          {{ isRefreshing ? 'Refreshing...' : 'Refresh' }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Test Description -->\n    <div class=\"test-description\" *ngIf=\"record.Description\">\n      <p>{{ record.Description }}</p>\n    </div>\n\n    <!-- Metrics Bar -->\n    <div class=\"metrics-bar\" *ngIf=\"testRunsLoaded && testRuns.length > 0\">\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Total Runs</div>\n        <div class=\"metric-value\">{{ testRuns.length }}</div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Pass Rate</div>\n        <div class=\"metric-value\">{{ getPassRate().toFixed(1) }}%</div>\n        <div class=\"metric-progress\">\n          <div class=\"metric-progress-fill\" [style.width.%]=\"getPassRate()\"></div>\n        </div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Avg Cost</div>\n        <div class=\"metric-value\">{{ formatCost(getAverageCost()) }}</div>\n      </div>\n      <div class=\"metric-card\">\n        <div class=\"metric-label\">Avg Duration</div>\n        <div class=\"metric-value\">{{ formatDuration(getAverageDuration()) }}</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Tabs -->\n  <div class=\"tabs-container\">\n    <div class=\"tabs\" role=\"tablist\">\n      <button class=\"tab\"\n              [class.active]=\"activeTab === 'overview'\"\n              (click)=\"changeTab('overview')\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab === 'overview'\">\n        <i class=\"fas fa-th-large\"></i>\n        <span>Overview</span>\n      </button>\n      <button class=\"tab\"\n              [class.active]=\"activeTab === 'config'\"\n              (click)=\"changeTab('config')\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab === 'config'\">\n        <i class=\"fas fa-sliders-h\"></i>\n        <span>Configuration</span>\n      </button>\n      <button class=\"tab\"\n              [class.active]=\"activeTab === 'runs'\"\n              (click)=\"changeTab('runs')\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab === 'runs'\">\n        <i class=\"fas fa-history\"></i>\n        <span>Runs</span>\n        <span class=\"tab-badge\" *ngIf=\"testRunsLoaded\">{{ testRuns.length }}</span>\n      </button>\n      <button class=\"tab\"\n              [class.active]=\"activeTab === 'suites'\"\n              (click)=\"changeTab('suites')\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab === 'suites'\">\n        <i class=\"fas fa-layer-group\"></i>\n        <span>Test Suites</span>\n        <span class=\"tab-badge\" *ngIf=\"suiteTestsLoaded\">{{ suiteTests.length }}</span>\n      </button>\n      <button class=\"tab\"\n              [class.active]=\"activeTab === 'analytics'\"\n              (click)=\"changeTab('analytics')\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab === 'analytics'\">\n        <i class=\"fas fa-chart-line\"></i>\n        <span>Analytics</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\">\n    <!-- Overview Tab -->\n    <div class=\"overview-tab\" *ngIf=\"activeTab === 'overview'\">\n      <!-- Basic Information -->\n      <div class=\"info-section\">\n        <h3><i class=\"fas fa-info-circle\"></i> Test Information</h3>\n        <div class=\"info-grid\">\n          <div class=\"info-item\">\n            <div class=\"info-label\">Name</div>\n            <div class=\"info-value\">{{ record.Name }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Type</div>\n            <div class=\"info-value\">{{ record.Type || 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Status</div>\n            <div class=\"info-value\">\n              <span class=\"status-badge-inline\" [ngClass]=\"getStatusClass()\">{{ record.Status }}</span>\n            </div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Priority</div>\n            <div class=\"info-value\">{{ record.Priority || 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Estimated Duration</div>\n            <div class=\"info-value\">{{ record.EstimatedDurationSeconds ? formatDuration(record.EstimatedDurationSeconds) : 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Estimated Cost</div>\n            <div class=\"info-value\">{{ record.EstimatedCostUSD ? formatCost(record.EstimatedCostUSD) : 'N/A' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Repeat Count</div>\n            <div class=\"info-value\">{{ record.RepeatCount || 1 }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Max Execution Time</div>\n            <div class=\"info-value\">{{ formatTimeout(record.MaxExecutionTimeMS) }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Created</div>\n            <div class=\"info-value\">{{ record.__mj_CreatedAt | date:'medium' }}</div>\n          </div>\n          <div class=\"info-item\">\n            <div class=\"info-label\">Updated</div>\n            <div class=\"info-value\">{{ record.__mj_UpdatedAt | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- JSON Data Views -->\n      <div class=\"json-section\">\n        <h3><i class=\"fas fa-code\"></i> Test Definition</h3>\n        <div class=\"json-tabs\">\n          <button class=\"json-tab\"\n                  [class.active]=\"activeJsonView === 'input'\"\n                  (click)=\"setJsonView('input')\">\n            <i class=\"fas fa-sign-in-alt\"></i>\n            Input Definition\n          </button>\n          <button class=\"json-tab\"\n                  [class.active]=\"activeJsonView === 'expected'\"\n                  (click)=\"setJsonView('expected')\">\n            <i class=\"fas fa-check-double\"></i>\n            Expected Outcomes\n          </button>\n          <button class=\"json-tab\"\n                  [class.active]=\"activeJsonView === 'config'\"\n                  (click)=\"setJsonView('config')\">\n            <i class=\"fas fa-cog\"></i>\n            Configuration\n          </button>\n          <button class=\"json-tab\"\n                  [class.active]=\"activeJsonView === 'tags'\"\n                  (click)=\"setJsonView('tags')\">\n            <i class=\"fas fa-tags\"></i>\n            Tags\n          </button>\n        </div>\n        <div class=\"code-editor-container\">\n          <mj-code-editor\n            [value]=\"getJsonData()\"\n            language=\"json\"\n            [readonly]=\"true\"\n            [toolbar]=\"jsonToolbar\"\n            [lineWrapping]=\"true\">\n          </mj-code-editor>\n        </div>\n      </div>\n    </div>\n\n    <!-- Configuration Tab -->\n    <div class=\"config-tab\" *ngIf=\"activeTab === 'config'\">\n      <div class=\"config-section\">\n        <h3><i class=\"fas fa-cogs\"></i> Execution Settings</h3>\n        <div class=\"config-grid\">\n          <div class=\"config-item\">\n            <label>Priority</label>\n            <input type=\"number\" [(ngModel)]=\"record.Priority\" class=\"config-input\" placeholder=\"Lower = Higher Priority\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Repeat Count</label>\n            <input type=\"number\" [(ngModel)]=\"record.RepeatCount\" class=\"config-input\" min=\"1\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Estimated Duration (seconds)</label>\n            <input type=\"number\" [(ngModel)]=\"record.EstimatedDurationSeconds\" class=\"config-input\" />\n          </div>\n          <div class=\"config-item\">\n            <label>Estimated Cost (USD)</label>\n            <input type=\"number\" step=\"0.000001\" [(ngModel)]=\"record.EstimatedCostUSD\" class=\"config-input\" />\n          </div>\n          <div class=\"config-item full-width\">\n            <label>Max Execution Time (ms)</label>\n            <input type=\"number\" [(ngModel)]=\"record.MaxExecutionTimeMS\" class=\"config-input\" placeholder=\"Default: 300000 (5 min)\" />\n            <span class=\"config-hint\">Leave empty for default 5 minute timeout</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"config-section\">\n        <h3><i class=\"fas fa-sign-in-alt\"></i> Input Definition (JSON)</h3>\n        <div class=\"config-editor-container\">\n          <mj-code-editor\n            [value]=\"record.InputDefinition || ''\"\n            language=\"json\"\n            [readonly]=\"false\"\n            [lineWrapping]=\"true\"\n            (change)=\"record.InputDefinition = $event\">\n          </mj-code-editor>\n        </div>\n      </div>\n\n      <div class=\"config-section\">\n        <h3><i class=\"fas fa-check-double\"></i> Expected Outcomes (JSON)</h3>\n        <div class=\"config-editor-container\">\n          <mj-code-editor\n            [value]=\"record.ExpectedOutcomes || ''\"\n            language=\"json\"\n            [readonly]=\"false\"\n            [lineWrapping]=\"true\"\n            (change)=\"record.ExpectedOutcomes = $event\">\n          </mj-code-editor>\n        </div>\n      </div>\n\n      <div class=\"config-section\">\n        <h3><i class=\"fas fa-cog\"></i> Configuration (JSON)</h3>\n        <div class=\"config-editor-container\">\n          <mj-code-editor\n            [value]=\"record.Configuration || ''\"\n            language=\"json\"\n            [readonly]=\"false\"\n            [lineWrapping]=\"true\"\n            (change)=\"record.Configuration = $event\">\n          </mj-code-editor>\n        </div>\n      </div>\n\n      <div class=\"config-section\">\n        <h3><i class=\"fas fa-tags\"></i> Tags (JSON Array)</h3>\n        <div class=\"config-editor-container small\">\n          <mj-code-editor\n            [value]=\"record.Tags || '[]'\"\n            language=\"json\"\n            [readonly]=\"false\"\n            [lineWrapping]=\"true\"\n            (change)=\"record.Tags = $event\">\n          </mj-code-editor>\n        </div>\n      </div>\n    </div>\n\n    <!-- Test Runs Tab -->\n    <div class=\"runs-tab\" *ngIf=\"activeTab === 'runs'\">\n      <!-- Loading State -->\n      <div class=\"loading-state\" *ngIf=\"loadingRuns\">\n        <div class=\"skeleton-list\">\n          <div class=\"skeleton-card\" *ngFor=\"let i of [1,2,3,4,5]\">\n            <div class=\"skeleton-icon\"></div>\n            <div class=\"skeleton-content\">\n              <div class=\"skeleton-line wide\"></div>\n              <div class=\"skeleton-line narrow\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Runs List -->\n      <div class=\"runs-list\" *ngIf=\"!loadingRuns && testRuns.length > 0\">\n        <div class=\"run-item\" *ngFor=\"let run of testRuns\" (click)=\"openTestRun(run.ID)\">\n          <div class=\"run-icon\" [style.background-color]=\"getRunStatusColor(run.Status)\">\n            <i class=\"fas\"\n               [class.fa-check]=\"run.Status === 'Passed'\"\n               [class.fa-times]=\"run.Status === 'Failed'\"\n               [class.fa-exclamation]=\"run.Status === 'Error'\"\n               [class.fa-stopwatch]=\"run.Status === 'Timeout'\"\n               [class.fa-spinner]=\"run.Status === 'Running'\"\n               [class.fa-clock]=\"run.Status === 'Pending'\"></i>\n          </div>\n          <div class=\"run-content\">\n            <div class=\"run-header\">\n              <span class=\"run-id\">Run #{{ run.ID.substring(0, 8) }}</span>\n              <span class=\"run-status\" [style.color]=\"getRunStatusColor(run.Status)\">{{ run.Status }}</span>\n            </div>\n            <div class=\"run-meta\">\n              <span><i class=\"fas fa-calendar\"></i> {{ getRelativeTime(run.StartedAt) }}</span>\n              <span *ngIf=\"run.DurationSeconds\"><i class=\"fas fa-clock\"></i> {{ formatDuration(run.DurationSeconds) }}</span>\n              <span *ngIf=\"run.CostUSD\"><i class=\"fas fa-dollar-sign\"></i> {{ formatCost(run.CostUSD) }}</span>\n              <mj-entity-link-pill\n                *ngIf=\"run.TargetLogEntityID && run.TargetLogID\"\n                [entityName]=\"run.TargetLogEntity\"\n                [recordId]=\"run.TargetLogID\">\n              </mj-entity-link-pill>\n            </div>\n            <!-- Evaluation indicators -->\n            <div class=\"run-eval-stack\">\n              <!-- Status indicator -->\n              <span class=\"eval-pill status-pill\" *ngIf=\"evalPreferences.showExecution\"\n                    [ngClass]=\"'status-' + run.Status.toLowerCase()\"\n                    [title]=\"getStatusTooltip(run.Status)\">\n                <i class=\"fas\"\n                   [class.fa-check]=\"run.Status === 'Passed'\"\n                   [class.fa-times]=\"run.Status === 'Failed'\"\n                   [class.fa-exclamation]=\"run.Status === 'Error'\"\n                   [class.fa-hourglass-end]=\"run.Status === 'Timeout'\"\n                   [class.fa-forward]=\"run.Status === 'Skipped'\"\n                   [class.fa-spinner]=\"run.Status === 'Running'\"\n                   [class.fa-clock]=\"run.Status === 'Pending'\"></i>\n                <span>{{ run.Status }}</span>\n              </span>\n              <!-- Human feedback indicator -->\n              <ng-container *ngIf=\"evalPreferences.showHuman\">\n                <span class=\"eval-pill human-pill no-feedback\" *ngIf=\"!getFeedbackForRun(run.ID)?.Rating\"\n                      title=\"Human Review: No rating submitted yet\">\n                  <i class=\"fas fa-user-slash\"></i>\n                </span>\n                <span class=\"eval-pill human-pill has-feedback\" *ngIf=\"getFeedbackForRun(run.ID)?.Rating as rating\"\n                      [class.rating-low]=\"rating <= 4\"\n                      [class.rating-medium]=\"rating >= 5 && rating <= 6\"\n                      [class.rating-good]=\"rating >= 7 && rating <= 8\"\n                      [class.rating-excellent]=\"rating >= 9\"\n                      [title]=\"getHumanTooltip(rating, getFeedbackForRun(run.ID)?.CorrectionSummary || getFeedbackForRun(run.ID)?.Comments || null)\">\n                  <i class=\"fas fa-user\"></i>\n                  <span>{{ rating }}</span>\n                </span>\n              </ng-container>\n              <!-- Auto score indicator -->\n              <ng-container *ngIf=\"evalPreferences.showAuto\">\n                <span class=\"eval-pill auto-pill no-score\" *ngIf=\"run.Score == null\"\n                      title=\"Auto Score: No automated score available\">\n                  <i class=\"fas fa-robot\"></i>\n                </span>\n                <span class=\"eval-pill auto-pill has-score\" *ngIf=\"run.Score != null\"\n                      [class.score-low]=\"run.Score < 0.5\"\n                      [class.score-medium]=\"run.Score >= 0.5 && run.Score < 0.7\"\n                      [class.score-good]=\"run.Score >= 0.7 && run.Score < 0.85\"\n                      [class.score-excellent]=\"run.Score >= 0.85\"\n                      [title]=\"'Auto Score: ' + (run.Score * 100).toFixed(0) + '% automated evaluation'\">\n                  <i class=\"fas fa-robot\"></i>\n                  <span>{{ (run.Score * 100).toFixed(0) }}%</span>\n                </span>\n              </ng-container>\n            </div>\n            <div class=\"run-tags\" *ngIf=\"getRunTags(run).length > 0\">\n              <span class=\"run-tag\" *ngFor=\"let tag of getRunTags(run).slice(0, 3)\">{{ tag }}</span>\n              <span class=\"run-tag-more\" *ngIf=\"getRunTags(run).length > 3\">+{{ getRunTags(run).length - 3 }}</span>\n            </div>\n          </div>\n          <i class=\"fas fa-chevron-right\"></i>\n        </div>\n      </div>\n\n      <!-- Empty State -->\n      <div class=\"empty-state\" *ngIf=\"testRunsLoaded && !loadingRuns && testRuns.length === 0\">\n        <div class=\"empty-icon\">\n          <i class=\"fas fa-play-circle\"></i>\n        </div>\n        <h4>No Test Runs Yet</h4>\n        <p>Run this test to see execution history and results here.</p>\n        <button kendoButton (click)=\"runTest()\" themeColor=\"primary\">\n          <i class=\"fas fa-play\"></i> Run Test Now\n        </button>\n      </div>\n    </div>\n\n    <!-- Test Suites Tab -->\n    <div class=\"suites-tab\" *ngIf=\"activeTab === 'suites'\">\n      <!-- Loading State -->\n      <div class=\"loading-state\" *ngIf=\"loadingSuites\">\n        <div class=\"skeleton-list\">\n          <div class=\"skeleton-card\" *ngFor=\"let i of [1,2,3]\">\n            <div class=\"skeleton-icon\"></div>\n            <div class=\"skeleton-content\">\n              <div class=\"skeleton-line wide\"></div>\n              <div class=\"skeleton-line narrow\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Suites List -->\n      <div class=\"suites-list\" *ngIf=\"!loadingSuites && suiteTests.length > 0\">\n        <div class=\"suite-item\" *ngFor=\"let suiteTest of suiteTests\" (click)=\"openTestSuite(suiteTest.SuiteID)\">\n          <div class=\"suite-icon\">\n            <i class=\"fas fa-layer-group\"></i>\n          </div>\n          <div class=\"suite-content\">\n            <div class=\"suite-name\">{{ suiteTest.Suite }}</div>\n            <div class=\"suite-meta\">\n              <span><i class=\"fas fa-sort-numeric-up\"></i> Sequence: {{ suiteTest.Sequence }}</span>\n              <span *ngIf=\"suiteTest.Status\"><i class=\"fas fa-info-circle\"></i> {{ suiteTest.Status }}</span>\n            </div>\n          </div>\n          <i class=\"fas fa-chevron-right\"></i>\n        </div>\n      </div>\n\n      <!-- Empty State -->\n      <div class=\"empty-state\" *ngIf=\"suiteTestsLoaded && !loadingSuites && suiteTests.length === 0\">\n        <div class=\"empty-icon\">\n          <i class=\"fas fa-folder-open\"></i>\n        </div>\n        <h4>Not Part of Any Suite</h4>\n        <p>This test is not included in any test suites. Add it to a suite to run it with other tests.</p>\n      </div>\n    </div>\n\n    <!-- Analytics Tab -->\n    <div class=\"history-tab\" *ngIf=\"activeTab === 'analytics'\">\n      <!-- Loading State -->\n      <div class=\"loading-state\" *ngIf=\"loadingHistory\">\n        <mj-loading text=\"Loading history...\"></mj-loading>\n      </div>\n\n      <!-- History Content -->\n      <div class=\"history-content\" *ngIf=\"!loadingHistory && historyLoaded\">\n        <!-- Filters -->\n        <div class=\"history-filters\">\n          <div class=\"time-range-filters\">\n            <span class=\"filter-label\">Time Range:</span>\n            <button class=\"filter-btn\"\n                    [class.active]=\"historyTimeRange === '7d'\"\n                    (click)=\"setHistoryTimeRange('7d')\">7 Days</button>\n            <button class=\"filter-btn\"\n                    [class.active]=\"historyTimeRange === '30d'\"\n                    (click)=\"setHistoryTimeRange('30d')\">30 Days</button>\n            <button class=\"filter-btn\"\n                    [class.active]=\"historyTimeRange === '90d'\"\n                    (click)=\"setHistoryTimeRange('90d')\">90 Days</button>\n            <button class=\"filter-btn\"\n                    [class.active]=\"historyTimeRange === 'all'\"\n                    (click)=\"setHistoryTimeRange('all')\">All Time</button>\n          </div>\n          <div class=\"history-actions\">\n            <button kendoButton (click)=\"exportHistoryToCSV()\" [disabled]=\"historyData.length === 0\">\n              <i class=\"fas fa-download\"></i> Export CSV\n            </button>\n          </div>\n        </div>\n\n        <!-- KPI Cards -->\n        <div class=\"history-kpi-cards\" *ngIf=\"historyData.length > 0\">\n          <div class=\"kpi-card\">\n            <div class=\"kpi-icon\">\n              <i class=\"fas fa-play-circle\"></i>\n            </div>\n            <div class=\"kpi-content\">\n              <div class=\"kpi-value\">{{ getTotalRuns() }}</div>\n              <div class=\"kpi-label\">Total Runs</div>\n            </div>\n          </div>\n          <div class=\"kpi-card\" *ngIf=\"evalPreferences.showExecution\">\n            <div class=\"kpi-icon pass-rate\">\n              <i class=\"fas fa-percentage\"></i>\n            </div>\n            <div class=\"kpi-content\">\n              <div class=\"kpi-value\">\n                {{ getOverallPassRate().toFixed(1) }}%\n                <i class=\"fas trend-icon\"\n                   [class.fa-arrow-up]=\"getPassRateTrend() === 'up'\"\n                   [class.fa-arrow-down]=\"getPassRateTrend() === 'down'\"\n                   [class.fa-minus]=\"getPassRateTrend() === 'stable'\"\n                   [class.trend-up]=\"getPassRateTrend() === 'up'\"\n                   [class.trend-down]=\"getPassRateTrend() === 'down'\"></i>\n              </div>\n              <div class=\"kpi-label\">Pass Rate</div>\n            </div>\n          </div>\n          <div class=\"kpi-card\" *ngIf=\"evalPreferences.showAuto\">\n            <div class=\"kpi-icon\">\n              <i class=\"fas fa-star\"></i>\n            </div>\n            <div class=\"kpi-content\">\n              <div class=\"kpi-value\">{{ (getOverallAvgScore() * 100).toFixed(1) }}%</div>\n              <div class=\"kpi-label\">Avg Score</div>\n            </div>\n          </div>\n          <div class=\"kpi-card\">\n            <div class=\"kpi-icon\">\n              <i class=\"fas fa-clock\"></i>\n            </div>\n            <div class=\"kpi-content\">\n              <div class=\"kpi-value\">{{ formatDuration(getOverallAvgDuration()) }}</div>\n              <div class=\"kpi-label\">Avg Duration</div>\n            </div>\n          </div>\n          <div class=\"kpi-card\">\n            <div class=\"kpi-icon\">\n              <i class=\"fas fa-dollar-sign\"></i>\n            </div>\n            <div class=\"kpi-content\">\n              <div class=\"kpi-value\">{{ formatCost(getOverallAvgCost()) }}</div>\n              <div class=\"kpi-label\">Avg Cost</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Daily History Table -->\n        <div class=\"history-section\" *ngIf=\"historyData.length > 0\">\n          <h3><i class=\"fas fa-calendar-alt\"></i> Daily Performance</h3>\n          <div class=\"history-table-container\">\n            <table class=\"history-table\">\n              <thead>\n                <tr>\n                  <th>Date</th>\n                  <th>Runs</th>\n                  <th *ngIf=\"evalPreferences.showExecution\">Passed</th>\n                  <th *ngIf=\"evalPreferences.showExecution\">Failed</th>\n                  <th *ngIf=\"evalPreferences.showExecution\">Pass Rate</th>\n                  <th *ngIf=\"evalPreferences.showAuto\">Avg Score</th>\n                  <th>Avg Duration</th>\n                  <th>Avg Cost</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let day of historyData\">\n                  <td class=\"date-cell\">{{ day.date | date:'mediumDate' }}</td>\n                  <td class=\"runs-cell\">{{ day.runCount }}</td>\n                  <td class=\"passed-cell\" *ngIf=\"evalPreferences.showExecution\">{{ day.passCount }}</td>\n                  <td class=\"failed-cell\" *ngIf=\"evalPreferences.showExecution\">{{ day.failCount }}</td>\n                  <td class=\"pass-rate-cell\" *ngIf=\"evalPreferences.showExecution\">\n                    <div class=\"pass-rate-bar\">\n                      <div class=\"pass-rate-fill\" [style.width.%]=\"day.passRate\"></div>\n                      <span class=\"pass-rate-text\">{{ day.passRate.toFixed(1) }}%</span>\n                    </div>\n                  </td>\n                  <td class=\"score-cell\" *ngIf=\"evalPreferences.showAuto\">{{ (day.avgScore * 100).toFixed(1) }}%</td>\n                  <td class=\"duration-cell\">{{ formatDuration(day.avgDuration) }}</td>\n                  <td class=\"cost-cell\">{{ formatCost(day.avgCost) }}</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        <!-- Suite Performance -->\n        <div class=\"history-section\" *ngIf=\"suitePerformance.length > 0\">\n          <h3><i class=\"fas fa-layer-group\"></i> Performance by Suite</h3>\n          <div class=\"suite-performance-list\">\n            <div class=\"suite-perf-card\" *ngFor=\"let suite of suitePerformance\" (click)=\"openSuiteFromHistory(suite.suiteId)\">\n              <div class=\"suite-perf-header\">\n                <div class=\"suite-perf-name\">{{ suite.suiteName }}</div>\n                <div class=\"suite-perf-tags\" *ngIf=\"suite.tags.length > 0\">\n                  <span class=\"tag-mini\" *ngFor=\"let tag of suite.tags.slice(0, 3)\">{{ tag }}</span>\n                  <span class=\"tag-more\" *ngIf=\"suite.tags.length > 3\">+{{ suite.tags.length - 3 }}</span>\n                </div>\n              </div>\n              <div class=\"suite-perf-stats\">\n                <div class=\"suite-stat\">\n                  <span class=\"stat-value\">{{ suite.totalRuns }}</span>\n                  <span class=\"stat-label\">Runs</span>\n                </div>\n                <div class=\"suite-stat\" *ngIf=\"evalPreferences.showExecution\">\n                  <span class=\"stat-value pass-rate\" [class.high]=\"suite.passRate >= 80\" [class.low]=\"suite.passRate < 50\">\n                    {{ suite.passRate.toFixed(1) }}%\n                  </span>\n                  <span class=\"stat-label\">Pass Rate</span>\n                </div>\n                <div class=\"suite-stat\" *ngIf=\"evalPreferences.showAuto\">\n                  <span class=\"stat-value\">{{ (suite.avgScore * 100).toFixed(1) }}%</span>\n                  <span class=\"stat-label\">Avg Score</span>\n                </div>\n                <div class=\"suite-stat\">\n                  <span class=\"stat-value\">{{ formatDuration(suite.avgDuration) }}</span>\n                  <span class=\"stat-label\">Avg Duration</span>\n                </div>\n                <div class=\"suite-stat\">\n                  <span class=\"stat-value\">{{ formatCost(suite.avgCost) }}</span>\n                  <span class=\"stat-label\">Avg Cost</span>\n                </div>\n                <div class=\"suite-stat\" *ngIf=\"suite.lastRun\">\n                  <span class=\"stat-value\">{{ getRelativeTime(suite.lastRun) }}</span>\n                  <span class=\"stat-label\">Last Run</span>\n                </div>\n              </div>\n              <i class=\"fas fa-chevron-right suite-perf-arrow\"></i>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty State -->\n        <div class=\"empty-state\" *ngIf=\"historyData.length === 0\">\n          <div class=\"empty-icon\">\n            <i class=\"fas fa-chart-line\"></i>\n          </div>\n          <h4>No History Available</h4>\n          <p>Run this test to start building history and analytics data.</p>\n          <button kendoButton (click)=\"runTest()\" themeColor=\"primary\">\n            <i class=\"fas fa-play\"></i> Run Test Now\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Keyboard Shortcuts Toggle Button -->\n  <button class=\"shortcuts-toggle\" (click)=\"toggleShortcuts()\" [title]=\"showShortcuts ? 'Hide keyboard shortcuts' : 'Show keyboard shortcuts'\">\n    <i class=\"fas fa-keyboard\"></i>\n  </button>\n\n  <!-- Keyboard Shortcuts Hint (Desktop Only) -->\n  <div class=\"keyboard-shortcuts\" *ngIf=\"showShortcuts\">\n    <div class=\"shortcuts-header\">\n      <i class=\"fas fa-keyboard\"></i>\n      Shortcuts\n      <button class=\"shortcuts-close\" (click)=\"toggleShortcuts()\" title=\"Hide shortcuts\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"shortcut-list\">\n      <div class=\"shortcut-item\">\n        <span>Refresh</span>\n        <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>R</kbd></span>\n      </div>\n      <div class=\"shortcut-item\">\n        <span>Run Test</span>\n        <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>Enter</kbd></span>\n      </div>\n      <div class=\"shortcut-item\">\n        <span>Switch Tabs</span>\n        <span class=\"shortcut-keys\"><kbd>1</kbd>-<kbd>5</kbd></span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* ===========================\n   Test Form - World-Class UX\n   Premium Test Definition Styles\n   =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n  --test-primary: #2563eb;\n  --test-primary-light: #3b82f6;\n  --test-primary-dark: #1d4ed8;\n  --test-success: #10b981;\n  --test-success-light: #d1fae5;\n  --test-error: #ef4444;\n  --test-error-light: #fee2e2;\n  --test-warning: #f59e0b;\n  --test-warning-light: #fef3c7;\n  --test-disabled: #6b7280;\n  --test-bg: #f8fafc;\n  --test-surface: #ffffff;\n  --test-border: #e2e8f0;\n  --test-text: #1e293b;\n  --test-text-secondary: #64748b;\n  --test-text-muted: #94a3b8;\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --test-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --test-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n/* Base Container */\n.test-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* ===========================\n   Header Section\n   =========================== */\n.test-header {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  padding: 20px;\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n  gap: 16px;\n}\n\n.header-left {\n  display: flex;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Test Icon */\n.test-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--test-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.test-icon:hover {\n  transform: scale(1.05);\n}\n\n/* Test Info */\n.test-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.test-info h1 {\n  margin: 0 0 8px 0;\n  font-size: clamp(18px, 4vw, 24px);\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n  word-wrap: break-word;\n}\n\n.test-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n/* Status Badge */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.status-badge.status-active { background: linear-gradient(135deg, var(--test-success) 0%, #059669 100%); }\n.status-badge.status-disabled { background: linear-gradient(135deg, var(--test-disabled) 0%, #4b5563 100%); }\n.status-badge.status-pending { background: linear-gradient(135deg, var(--test-warning) 0%, #d97706 100%); }\n\n.status-badge-inline {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.status-badge-inline.status-active { background: var(--test-success); }\n.status-badge-inline.status-disabled { background: var(--test-disabled); }\n.status-badge-inline.status-pending { background: var(--test-warning); }\n\n.test-type {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  padding: 4px 10px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.header-actions button {\n  white-space: nowrap;\n}\n\n/* Test Description */\n.test-description {\n  padding: 16px;\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border-radius: var(--test-radius-md);\n  margin-bottom: 16px;\n  border: 1px solid var(--test-border);\n}\n\n.test-description p {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* ===========================\n   Metrics Bar\n   =========================== */\n.metrics-bar {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.metric-card {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 14px;\n  text-align: center;\n  transition: var(--test-transition);\n}\n\n.metric-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.metric-label {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  margin-bottom: 6px;\n}\n\n.metric-value {\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n/* Progress bar in metric card */\n.metric-progress {\n  margin-top: 8px;\n  height: 4px;\n  background: var(--test-border);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.metric-progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--test-success) 0%, #34d399 100%);\n  border-radius: 2px;\n  transition: width 0.5s ease-out;\n}\n\n/* ===========================\n   Tabs Navigation\n   =========================== */\n.tabs-container {\n  background: var(--test-surface);\n  border-bottom: 1px solid var(--test-border);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n\n.tabs {\n  display: flex;\n  padding: 0 20px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.tabs::-webkit-scrollbar {\n  display: none;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 14px 18px;\n  border: none;\n  background: transparent;\n  border-bottom: 3px solid transparent;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n  white-space: nowrap;\n}\n\n.tab:hover {\n  color: var(--test-primary);\n  background: rgba(37, 99, 235, 0.05);\n}\n\n.tab.active {\n  color: var(--test-primary);\n  border-bottom-color: var(--test-primary);\n  font-weight: 600;\n}\n\n.tab i {\n  font-size: 15px;\n}\n\n.tab-badge {\n  background: var(--test-border);\n  color: var(--test-text-secondary);\n  padding: 2px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.tab.active .tab-badge {\n  background: rgba(37, 99, 235, 0.15);\n  color: var(--test-primary);\n}\n\n.tab-shortcut {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 600;\n  margin-left: 4px;\n}\n\n/* ===========================\n   Tab Content Area\n   =========================== */\n.tab-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n  scroll-behavior: smooth;\n}\n\n/* ===========================\n   Overview Tab\n   =========================== */\n.overview-tab {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* Info Section */\n.info-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.info-section h3 {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.info-section h3 i {\n  color: var(--test-primary);\n}\n\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.info-label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.info-value {\n  font-size: 14px;\n  color: var(--test-text);\n  word-wrap: break-word;\n  font-weight: 500;\n}\n\n/* JSON Section */\n.json-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-section h3 i {\n  color: var(--test-primary);\n}\n\n.json-tabs {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 16px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n  flex-wrap: wrap;\n}\n\n.json-tab {\n  flex: 1;\n  min-width: 100px;\n  padding: 10px 14px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: var(--test-radius-sm);\n  transition: var(--test-transition);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.json-tab:hover {\n  color: var(--test-text);\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.json-tab.active {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  font-weight: 600;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.json-tab i {\n  font-size: 12px;\n}\n\n.code-editor-container {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n  max-height: 400px;\n}\n\n/* ===========================\n   Configuration Tab\n   =========================== */\n.config-tab {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  animation: fadeIn 0.3s ease-out;\n}\n\n.config-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.config-section h3 {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.config-section h3 i {\n  color: var(--test-primary);\n}\n\n.config-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n}\n\n.config-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.config-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.config-item label {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n}\n\n.config-input {\n  padding: 10px 14px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  font-size: 14px;\n  transition: var(--test-transition);\n  background: var(--test-surface);\n}\n\n.config-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.config-input::placeholder {\n  color: var(--test-text-muted);\n}\n\n.config-hint {\n  font-size: 11px;\n  color: var(--test-text-muted);\n  margin-top: 4px;\n}\n\n.config-editor-container {\n  border-radius: var(--test-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--test-border);\n  min-height: 200px;\n}\n\n.config-editor-container.small {\n  min-height: 100px;\n  max-height: 150px;\n}\n\n/* ===========================\n   Runs Tab\n   =========================== */\n.runs-tab,\n.suites-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n/* Loading States & Skeletons */\n.loading-state {\n  padding: 0;\n}\n\n.skeleton-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.skeleton-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.skeleton-icon {\n  width: 44px;\n  height: 44px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n  flex-shrink: 0;\n}\n\n.skeleton-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide { width: 70%; }\n.skeleton-line.narrow { width: 40%; }\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* Runs List */\n.runs-list,\n.suites-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.run-item,\n.suite-item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-item:hover,\n.suite-item:hover {\n  background: rgba(37, 99, 235, 0.05);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.run-icon,\n.suite-icon {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: white;\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.suite-icon {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.run-content,\n.suite-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.run-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 4px;\n}\n\n.run-id {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-status {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.suite-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-meta,\n.suite-meta {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  flex-wrap: wrap;\n}\n\n.run-meta span,\n.suite-meta span {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-meta span i,\n.suite-meta span i {\n  color: var(--test-text-muted);\n  font-size: 11px;\n}\n\n.run-item > i.fa-chevron-right,\n.suite-item > i.fa-chevron-right {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.run-item:hover > i.fa-chevron-right,\n.suite-item:hover > i.fa-chevron-right {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n/* Run Evaluation Stack */\n.run-eval-stack {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n/* Evaluation Pills */\n.eval-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  transition: var(--test-transition);\n}\n\n.eval-pill i {\n  font-size: 10px;\n}\n\n/* Status pill colors */\n.eval-pill.status-pill.status-passed {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n.eval-pill.status-pill.status-failed {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.status-pill.status-error {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.status-pill.status-timeout {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.status-pill.status-skipped,\n.eval-pill.status-pill.status-pending {\n  background: #f1f5f9;\n  color: #64748b;\n}\n\n.eval-pill.status-pill.status-running {\n  background: #dbeafe;\n  color: #2563eb;\n}\n\n/* Human feedback pills */\n.eval-pill.human-pill.no-feedback {\n  background: #f1f5f9;\n  color: #94a3b8;\n  padding: 4px 8px;\n}\n\n.eval-pill.human-pill.has-feedback.rating-low {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.human-pill.has-feedback.rating-medium {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.human-pill.has-feedback.rating-good {\n  background: #d1fae5;\n  color: #059669;\n}\n\n.eval-pill.human-pill.has-feedback.rating-excellent {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n/* Auto score pills */\n.eval-pill.auto-pill.no-score {\n  background: #f1f5f9;\n  color: #94a3b8;\n  padding: 4px 8px;\n}\n\n.eval-pill.auto-pill.has-score.score-low {\n  background: #fee2e2;\n  color: #dc2626;\n}\n\n.eval-pill.auto-pill.has-score.score-medium {\n  background: #fef3c7;\n  color: #d97706;\n}\n\n.eval-pill.auto-pill.has-score.score-good {\n  background: #d1fae5;\n  color: #059669;\n}\n\n.eval-pill.auto-pill.has-score.score-excellent {\n  background: #dcfce7;\n  color: #16a34a;\n}\n\n/* Run Tags */\n.run-tags {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.run-tag {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: rgba(37, 99, 235, 0.1);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.run-tag-more {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n/* ===========================\n   Empty States\n   =========================== */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 24px;\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.empty-icon {\n  width: 80px;\n  height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  margin-bottom: 20px;\n}\n\n.empty-icon i {\n  font-size: 36px;\n  color: var(--test-text-muted);\n}\n\n.empty-state h4 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n  color: var(--test-text-secondary);\n  max-width: 300px;\n}\n\n/* Legacy no-data for backwards compatibility */\n.no-data {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--test-text-muted);\n  text-align: center;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n}\n\n.no-data i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.no-data p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* ===========================\n   Keyboard Shortcuts Popup\n   =========================== */\n/* Keyboard shortcuts toggle button */\n.shortcuts-toggle {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  box-shadow: var(--test-shadow-md);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--test-text-secondary);\n  font-size: 14px;\n  z-index: 99;\n  transition: var(--test-transition);\n  opacity: 0.7;\n}\n\n.shortcuts-toggle:hover {\n  opacity: 1;\n  transform: scale(1.1);\n  color: var(--test-primary);\n  border-color: var(--test-primary);\n}\n\n.keyboard-shortcuts {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  padding: 12px 16px;\n  box-shadow: var(--test-shadow-lg);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  z-index: 100;\n  max-width: 260px;\n}\n\n.shortcuts-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 10px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.shortcuts-close {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--test-text-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n  border-radius: 4px;\n  transition: var(--test-transition);\n}\n\n.shortcuts-close:hover {\n  color: var(--test-text);\n  background: var(--test-border);\n}\n\n.shortcut-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.shortcut-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.shortcut-keys {\n  display: flex;\n  gap: 4px;\n}\n\n.shortcut-keys kbd {\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 11px;\n  color: var(--test-text);\n}\n\n/* ===========================\n   Responsive Design - Tablet\n   =========================== */\n@media (max-width: 1024px) {\n  .metrics-bar {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .info-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .config-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .keyboard-shortcuts, .shortcuts-toggle {\n    display: none;\n  }\n}\n\n/* ===========================\n   Responsive Design - Mobile\n   =========================== */\n@media (max-width: 768px) {\n  .test-form {\n    height: auto;\n    min-height: 100%;\n  }\n\n  .test-header {\n    padding: 16px;\n  }\n\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-left {\n    width: 100%;\n  }\n\n  .test-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 20px;\n  }\n\n  .test-info h1 {\n    font-size: 18px;\n  }\n\n  .test-meta {\n    gap: 8px;\n  }\n\n  .status-badge {\n    padding: 4px 10px;\n    font-size: 11px;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions button {\n    flex: 1;\n  }\n\n  .metrics-bar {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px;\n  }\n\n  .metric-card {\n    padding: 12px;\n  }\n\n  .metric-value {\n    font-size: 16px;\n  }\n\n  .tabs {\n    padding: 0 12px;\n  }\n\n  .tab {\n    padding: 12px 14px;\n    font-size: 13px;\n    gap: 6px;\n  }\n\n  .tab i {\n    font-size: 14px;\n  }\n\n  .tab-shortcut {\n    display: none;\n  }\n\n  .tab-content {\n    padding: 16px;\n  }\n\n  .info-section,\n  .json-section,\n  .config-section {\n    padding: 18px;\n  }\n\n  .info-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .json-tabs {\n    flex-direction: column;\n  }\n\n  .json-tab {\n    min-width: 0;\n    justify-content: flex-start;\n  }\n\n  .run-item,\n  .suite-item {\n    padding: 14px;\n  }\n\n  .run-icon,\n  .suite-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 16px;\n  }\n\n  .run-meta,\n  .suite-meta {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .empty-state {\n    padding: 40px 20px;\n  }\n\n  .empty-icon {\n    width: 64px;\n    height: 64px;\n  }\n\n  .empty-icon i {\n    font-size: 28px;\n  }\n}\n\n/* ===========================\n   Responsive Design - Small Mobile\n   =========================== */\n@media (max-width: 480px) {\n  .test-header {\n    padding: 12px;\n  }\n\n  .header-left {\n    gap: 12px;\n  }\n\n  .test-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n    border-radius: 8px;\n  }\n\n  .test-info h1 {\n    font-size: 16px;\n  }\n\n  .metrics-bar {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .tabs {\n    padding: 0 8px;\n  }\n\n  .tab {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n\n  .tab-badge {\n    display: none;\n  }\n\n  .tab-content {\n    padding: 12px;\n  }\n\n  .run-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n  }\n}\n\n/* ===========================\n   Touch Device Optimizations\n   =========================== */\n@media (hover: none) and (pointer: coarse) {\n  .tab,\n  .json-tab,\n  .run-item,\n  .suite-item {\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .run-item:active,\n  .suite-item:active {\n    background: rgba(37, 99, 235, 0.1);\n    transform: scale(0.98);\n  }\n\n  .tab:active,\n  .json-tab:active {\n    background: rgba(37, 99, 235, 0.1);\n  }\n\n  /* Larger touch targets */\n  .tab {\n    min-height: 48px;\n  }\n\n  .run-item,\n  .suite-item {\n    min-height: 64px;\n  }\n}\n\n/* ===========================\n   Reduced Motion\n   =========================== */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  .skeleton-icon,\n  .skeleton-line {\n    animation: none;\n    background: #e2e8f0;\n  }\n}\n\n/* ===========================\n   History Tab\n   =========================== */\n.history-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.history-content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n/* History Filters */\n.history-filters {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.time-range-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.filter-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  margin-right: 4px;\n}\n\n.filter-btn {\n  padding: 8px 16px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  color: var(--test-text-secondary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.filter-btn:hover {\n  border-color: var(--test-primary-light);\n  color: var(--test-primary);\n  background: rgba(37, 99, 235, 0.05);\n}\n\n.filter-btn.active {\n  background: var(--test-primary);\n  color: white;\n  border-color: var(--test-primary);\n}\n\n.history-actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* KPI Cards */\n.history-kpi-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 16px;\n}\n\n.kpi-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-md);\n  box-shadow: var(--test-shadow-sm);\n  transition: var(--test-transition);\n}\n\n.kpi-card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--test-shadow-md);\n}\n\n.kpi-icon {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n  border-radius: var(--test-radius-md);\n  color: white;\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.kpi-icon.pass-rate {\n  background: linear-gradient(135deg, var(--test-success) 0%, #059669 100%);\n}\n\n.kpi-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.kpi-label {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-top: 2px;\n}\n\n.trend-icon {\n  font-size: 14px;\n}\n\n.trend-icon.trend-up {\n  color: var(--test-success);\n}\n\n.trend-icon.trend-down {\n  color: var(--test-error);\n}\n\n/* History Section */\n.history-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 24px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.history-section h3 {\n  margin: 0 0 20px 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.history-section h3 i {\n  color: var(--test-primary);\n}\n\n/* History Table */\n.history-table-container {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.history-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 14px;\n}\n\n.history-table th,\n.history-table td {\n  padding: 12px 16px;\n  text-align: left;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.history-table th {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--test-text-muted);\n  background: var(--test-bg);\n}\n\n.history-table tbody tr:hover {\n  background: rgba(37, 99, 235, 0.03);\n}\n\n.date-cell {\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.passed-cell {\n  color: var(--test-success);\n  font-weight: 600;\n}\n\n.failed-cell {\n  color: var(--test-error);\n  font-weight: 600;\n}\n\n.pass-rate-cell {\n  min-width: 120px;\n}\n\n.pass-rate-bar {\n  position: relative;\n  height: 24px;\n  background: var(--test-bg);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pass-rate-fill {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background: linear-gradient(90deg, var(--test-success) 0%, #34d399 100%);\n  border-radius: 12px;\n  transition: width 0.5s ease-out;\n}\n\n.pass-rate-text {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--test-text);\n  z-index: 1;\n}\n\n/* Suite Performance List */\n.suite-performance-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.suite-perf-card {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 18px;\n  background: var(--test-bg);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card:hover {\n  background: rgba(37, 99, 235, 0.05);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.suite-perf-header {\n  flex: 1;\n  min-width: 0;\n}\n\n.suite-perf-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 6px;\n}\n\n.suite-perf-tags {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.tag-mini {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: rgba(37, 99, 235, 0.1);\n  color: var(--test-primary);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.tag-more {\n  display: inline-flex;\n  padding: 2px 8px;\n  background: var(--test-border);\n  color: var(--test-text-muted);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.suite-perf-stats {\n  display: flex;\n  gap: 24px;\n  flex-wrap: wrap;\n}\n\n.suite-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.suite-stat .stat-value {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n}\n\n.suite-stat .stat-value.pass-rate.high {\n  color: var(--test-success);\n}\n\n.suite-stat .stat-value.pass-rate.low {\n  color: var(--test-error);\n}\n\n.suite-stat .stat-label {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.suite-perf-arrow {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.suite-perf-card:hover .suite-perf-arrow {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n/* ===========================\n   Print Styles\n   =========================== */\n@media print {\n  .test-form {\n    background: white;\n    height: auto;\n  }\n\n  .header-actions,\n  .tabs-container,\n  .keyboard-shortcuts {\n    display: none !important;\n  }\n\n  .tab-content {\n    overflow: visible;\n    padding: 0;\n  }\n\n  .info-section,\n  .json-section,\n  .config-section,\n  .empty-state {\n    break-inside: avoid;\n    box-shadow: none;\n    border: 1px solid #ddd;\n  }\n}\n"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.TestingDialogService }, { type: i3.EvaluationPreferencesService }, { type: i0.ViewContainerRef }], { handleKeyboardShortcut: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestFormComponentExtended, { className: "TestFormComponentExtended", filePath: "src/lib/custom/Tests/test-form.component.ts", lineNumber: 61 }); })();
 export function LoadTestFormComponentExtended() {
     // Prevents tree-shaking
 }