@memberjunction/ng-core-entity-forms 6.1.4 → 6.2.0-edge.1

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

@@ -2008,78 +2008,450 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         super(...arguments);
         this.destroy$ = new Subject();
         // UI state
-        this.activeTab = 'overview';
-        this.loading = false;
-        this.loadingTests = false;
-        this.loadingRuns = false;
-        this.loadingAnalytics = false;
-        this.loadingCompare = false;
-        this.testsLoaded = false;
-        this.runsLoaded = false;
-        this.analyticsLoaded = false;
-        this.isRefreshing = false;
+        this.ActiveTab = 'overview';
+        this.Loading = false;
+        this.LoadingTests = false;
+        this.LoadingRuns = false;
+        this.LoadingAnalytics = false;
+        this.LoadingCompare = false;
+        this.TestsLoaded = false;
+        this.RunsLoaded = false;
+        this.AnalyticsLoaded = false;
+        this.isRefreshing = false; // case-violation-ok-legacy-back-compat: an ancestor class already declares the PascalCase name
         this.error = null;
         // Related data
-        this.suiteTests = [];
-        this.suiteRuns = [];
+        this.SuiteTests = [];
+        this.SuiteRuns = [];
         // Analytics data
-        this.analyticsData = [];
-        this.uniqueTags = [];
-        this.selectedTags = []; // Multi-select: empty array means "All Tags"
-        this.analyticsTimeRange = '30d';
-        this.analyticsView = 'summary';
-        this.matrixData = [];
-        this.loadingMatrix = false;
-        this.matrixLoaded = false;
+        this.AnalyticsData = [];
+        this.UniqueTags = [];
+        this.SelectedTags = [];
+        this.AnalyticsTimeRange = '30d';
+        this.AnalyticsView = 'summary';
+        this.MatrixData = [];
+        this.LoadingMatrix = false;
+        this.MatrixLoaded = false;
         this.chartRendered = false;
         // Compare data
-        this.compareRunA = null;
-        this.compareRunB = null;
-        this.compareResults = [];
-        this.compareRunATests = [];
-        this.compareRunBTests = [];
+        this.CompareRunA = null;
+        this.CompareRunB = null;
+        this.CompareResults = [];
+        this.CompareRunATests = [];
+        this.CompareRunBTests = [];
         // Keyboard shortcuts
-        this.keyboardShortcutsEnabled = true;
-        this.showShortcuts = false; // Hidden by default
+        this.KeyboardShortcutsEnabled = true;
+        this.ShowShortcuts = false;
         this.shortcutsSettingEntity = null;
         // Evaluation preferences
-        this.evalPreferences = { showExecution: true, showHuman: true, showAuto: false };
+        this.EvalPreferences = { showExecution: true, showHuman: true, showAuto: false };
         // Filter collapse state
-        this.filtersCollapsed = false;
+        this.FiltersCollapsed = false;
         // Matrix sorting
-        this.matrixSortBy = 'sequence';
-        this.matrixSortAsc = true;
+        this.MatrixSortBy = 'sequence';
+        this.MatrixSortAsc = true;
         // Matrix row selection
-        this.selectedMatrixTestId = null;
+        this.SelectedMatrixTestId = null;
         // Matrix test name filter
-        this.matrixTestFilter = '';
+        this.MatrixTestFilter = '';
         this.matrixFilterSubject$ = new Subject();
         // Edit state
-        this.isSaving = false;
-        this.parentSuiteOptions = [];
-        this.tagDraft = '';
-        this.statusOptions = ['Active', 'Pending', 'Disabled'];
+        this.IsSaving = false;
+        this.ParentSuiteOptions = [];
+        this.TagDraft = '';
+        this.StatusOptions = ['Active', 'Pending', 'Disabled'];
         // Add Tests picker state
-        this.showAddTestsDialog = false;
-        this.availableTests = [];
-        this.loadingAvailableTests = false;
-        this.selectedTestIdsToAdd = new Set();
-        this.addTestsSearch = '';
-        this.isAddingTests = false;
+        this.ShowAddTestsDialog = false;
+        this.AvailableTests = [];
+        this.LoadingAvailableTests = false;
+        this.SelectedTestIdsToAdd = new Set();
+        this.AddTestsSearch = '';
+        this.IsAddingTests = false;
         // Remove-confirm state (per-row inline confirm)
-        this.confirmingRemoveSuiteTestId = null;
-        this.isRemovingTest = false;
+        this.ConfirmingRemoveSuiteTestId = null;
+        this.IsRemovingTest = false;
         // Reorder state
-        this.isReorderingTests = false;
+        this.IsReorderingTests = false;
         // Service injections
         this.navigationService = inject(NavigationService);
-        this.testingDialogService = inject(TestingDialogService);
+        this.TestingDialogService = inject(TestingDialogService);
         this.evalPrefsService = inject(EvaluationPreferencesService);
         this.viewContainerRef = inject(ViewContainerRef);
         this.appManager = inject(ApplicationManager);
         this.confirmService = inject(MJConfirmService);
     }
+    /** @deprecated Use {@link ActiveTab}. */
+    get activeTab() {
+        return this.ActiveTab;
+    }
+    /** @deprecated Use {@link ActiveTab}. */
+    set activeTab(value) {
+        this.ActiveTab = value;
+    }
+    /** @deprecated Use {@link Loading}. */
+    get loading() {
+        return this.Loading;
+    }
+    /** @deprecated Use {@link Loading}. */
+    set loading(value) {
+        this.Loading = value;
+    }
+    /** @deprecated Use {@link LoadingTests}. */
+    get loadingTests() {
+        return this.LoadingTests;
+    }
+    /** @deprecated Use {@link LoadingTests}. */
+    set loadingTests(value) {
+        this.LoadingTests = value;
+    }
+    /** @deprecated Use {@link LoadingRuns}. */
+    get loadingRuns() {
+        return this.LoadingRuns;
+    }
+    /** @deprecated Use {@link LoadingRuns}. */
+    set loadingRuns(value) {
+        this.LoadingRuns = value;
+    }
+    /** @deprecated Use {@link LoadingAnalytics}. */
+    get loadingAnalytics() {
+        return this.LoadingAnalytics;
+    }
+    /** @deprecated Use {@link LoadingAnalytics}. */
+    set loadingAnalytics(value) {
+        this.LoadingAnalytics = value;
+    }
+    /** @deprecated Use {@link LoadingCompare}. */
+    get loadingCompare() {
+        return this.LoadingCompare;
+    }
+    /** @deprecated Use {@link LoadingCompare}. */
+    set loadingCompare(value) {
+        this.LoadingCompare = value;
+    }
+    /** @deprecated Use {@link TestsLoaded}. */
+    get testsLoaded() {
+        return this.TestsLoaded;
+    }
+    /** @deprecated Use {@link TestsLoaded}. */
+    set testsLoaded(value) {
+        this.TestsLoaded = value;
+    }
+    /** @deprecated Use {@link RunsLoaded}. */
+    get runsLoaded() {
+        return this.RunsLoaded;
+    }
+    /** @deprecated Use {@link RunsLoaded}. */
+    set runsLoaded(value) {
+        this.RunsLoaded = value;
+    }
+    /** @deprecated Use {@link AnalyticsLoaded}. */
+    get analyticsLoaded() {
+        return this.AnalyticsLoaded;
+    }
+    /** @deprecated Use {@link AnalyticsLoaded}. */
+    set analyticsLoaded(value) {
+        this.AnalyticsLoaded = value;
+    }
+    /** @deprecated Use {@link SuiteTests}. */
+    get suiteTests() {
+        return this.SuiteTests;
+    }
+    /** @deprecated Use {@link SuiteTests}. */
+    set suiteTests(value) {
+        this.SuiteTests = value;
+    }
+    /** @deprecated Use {@link SuiteRuns}. */
+    get suiteRuns() {
+        return this.SuiteRuns;
+    }
+    /** @deprecated Use {@link SuiteRuns}. */
+    set suiteRuns(value) {
+        this.SuiteRuns = value;
+    }
+    /** @deprecated Use {@link AnalyticsData}. */
+    get analyticsData() {
+        return this.AnalyticsData;
+    }
+    /** @deprecated Use {@link AnalyticsData}. */
+    set analyticsData(value) {
+        this.AnalyticsData = value;
+    }
+    /** @deprecated Use {@link UniqueTags}. */
+    get uniqueTags() {
+        return this.UniqueTags;
+    }
+    /** @deprecated Use {@link UniqueTags}. */
+    set uniqueTags(value) {
+        this.UniqueTags = value;
+    }
+    /** @deprecated Use {@link SelectedTags}. */
+    get selectedTags() {
+        return this.SelectedTags;
+    }
+    /** @deprecated Use {@link SelectedTags}. */
+    set selectedTags(value) {
+        this.SelectedTags = value;
+    } // Multi-select: empty array means "All Tags"
+    /** @deprecated Use {@link AnalyticsTimeRange}. */
+    get analyticsTimeRange() {
+        return this.AnalyticsTimeRange;
+    }
+    /** @deprecated Use {@link AnalyticsTimeRange}. */
+    set analyticsTimeRange(value) {
+        this.AnalyticsTimeRange = value;
+    }
+    /** @deprecated Use {@link AnalyticsView}. */
+    get analyticsView() {
+        return this.AnalyticsView;
+    }
+    /** @deprecated Use {@link AnalyticsView}. */
+    set analyticsView(value) {
+        this.AnalyticsView = value;
+    }
+    /** @deprecated Use {@link MatrixData}. */
+    get matrixData() {
+        return this.MatrixData;
+    }
+    /** @deprecated Use {@link MatrixData}. */
+    set matrixData(value) {
+        this.MatrixData = value;
+    }
+    /** @deprecated Use {@link LoadingMatrix}. */
+    get loadingMatrix() {
+        return this.LoadingMatrix;
+    }
+    /** @deprecated Use {@link LoadingMatrix}. */
+    set loadingMatrix(value) {
+        this.LoadingMatrix = value;
+    }
+    /** @deprecated Use {@link MatrixLoaded}. */
+    get matrixLoaded() {
+        return this.MatrixLoaded;
+    }
+    /** @deprecated Use {@link MatrixLoaded}. */
+    set matrixLoaded(value) {
+        this.MatrixLoaded = value;
+    }
+    /** @deprecated Use {@link ChartContainer}. */
+    get chartContainer() {
+        return this.ChartContainer;
+    }
+    /** @deprecated Use {@link ChartContainer}. */
+    set chartContainer(value) {
+        this.ChartContainer = value;
+    }
+    /** @deprecated Use {@link CompareRunA}. */
+    get compareRunA() {
+        return this.CompareRunA;
+    }
+    /** @deprecated Use {@link CompareRunA}. */
+    set compareRunA(value) {
+        this.CompareRunA = value;
+    }
+    /** @deprecated Use {@link CompareRunB}. */
+    get compareRunB() {
+        return this.CompareRunB;
+    }
+    /** @deprecated Use {@link CompareRunB}. */
+    set compareRunB(value) {
+        this.CompareRunB = value;
+    }
+    /** @deprecated Use {@link CompareResults}. */
+    get compareResults() {
+        return this.CompareResults;
+    }
+    /** @deprecated Use {@link CompareResults}. */
+    set compareResults(value) {
+        this.CompareResults = value;
+    }
+    /** @deprecated Use {@link CompareRunATests}. */
+    get compareRunATests() {
+        return this.CompareRunATests;
+    }
+    /** @deprecated Use {@link CompareRunATests}. */
+    set compareRunATests(value) {
+        this.CompareRunATests = value;
+    }
+    /** @deprecated Use {@link CompareRunBTests}. */
+    get compareRunBTests() {
+        return this.CompareRunBTests;
+    }
+    /** @deprecated Use {@link CompareRunBTests}. */
+    set compareRunBTests(value) {
+        this.CompareRunBTests = value;
+    }
+    /** @deprecated Use {@link KeyboardShortcutsEnabled}. */
+    get keyboardShortcutsEnabled() {
+        return this.KeyboardShortcutsEnabled;
+    }
+    /** @deprecated Use {@link KeyboardShortcutsEnabled}. */
+    set keyboardShortcutsEnabled(value) {
+        this.KeyboardShortcutsEnabled = value;
+    }
+    /** @deprecated Use {@link ShowShortcuts}. */
+    get showShortcuts() {
+        return this.ShowShortcuts;
+    }
+    /** @deprecated Use {@link ShowShortcuts}. */
+    set showShortcuts(value) {
+        this.ShowShortcuts = value;
+    } // Hidden by default
     get metadata() { return this.ProviderToUse; }
+    /** @deprecated Use {@link EvalPreferences}. */
+    get evalPreferences() {
+        return this.EvalPreferences;
+    }
+    /** @deprecated Use {@link EvalPreferences}. */
+    set evalPreferences(value) {
+        this.EvalPreferences = value;
+    }
+    /** @deprecated Use {@link FiltersCollapsed}. */
+    get filtersCollapsed() {
+        return this.FiltersCollapsed;
+    }
+    /** @deprecated Use {@link FiltersCollapsed}. */
+    set filtersCollapsed(value) {
+        this.FiltersCollapsed = value;
+    }
+    /** @deprecated Use {@link MatrixSortBy}. */
+    get matrixSortBy() {
+        return this.MatrixSortBy;
+    }
+    /** @deprecated Use {@link MatrixSortBy}. */
+    set matrixSortBy(value) {
+        this.MatrixSortBy = value;
+    }
+    /** @deprecated Use {@link MatrixSortAsc}. */
+    get matrixSortAsc() {
+        return this.MatrixSortAsc;
+    }
+    /** @deprecated Use {@link MatrixSortAsc}. */
+    set matrixSortAsc(value) {
+        this.MatrixSortAsc = value;
+    }
+    /** @deprecated Use {@link SelectedMatrixTestId}. */
+    get selectedMatrixTestId() {
+        return this.SelectedMatrixTestId;
+    }
+    /** @deprecated Use {@link SelectedMatrixTestId}. */
+    set selectedMatrixTestId(value) {
+        this.SelectedMatrixTestId = value;
+    }
+    /** @deprecated Use {@link MatrixTestFilter}. */
+    get matrixTestFilter() {
+        return this.MatrixTestFilter;
+    }
+    /** @deprecated Use {@link MatrixTestFilter}. */
+    set matrixTestFilter(value) {
+        this.MatrixTestFilter = value;
+    }
+    /** @deprecated Use {@link IsSaving}. */
+    get isSaving() {
+        return this.IsSaving;
+    }
+    /** @deprecated Use {@link IsSaving}. */
+    set isSaving(value) {
+        this.IsSaving = value;
+    }
+    /** @deprecated Use {@link ParentSuiteOptions}. */
+    get parentSuiteOptions() {
+        return this.ParentSuiteOptions;
+    }
+    /** @deprecated Use {@link ParentSuiteOptions}. */
+    set parentSuiteOptions(value) {
+        this.ParentSuiteOptions = value;
+    }
+    /** @deprecated Use {@link TagDraft}. */
+    get tagDraft() {
+        return this.TagDraft;
+    }
+    /** @deprecated Use {@link TagDraft}. */
+    set tagDraft(value) {
+        this.TagDraft = value;
+    }
+    /** @deprecated Use {@link StatusOptions}. */
+    get statusOptions() {
+        return this.StatusOptions;
+    }
+    /** @deprecated Use {@link ShowAddTestsDialog}. */
+    get showAddTestsDialog() {
+        return this.ShowAddTestsDialog;
+    }
+    /** @deprecated Use {@link ShowAddTestsDialog}. */
+    set showAddTestsDialog(value) {
+        this.ShowAddTestsDialog = value;
+    }
+    /** @deprecated Use {@link AvailableTests}. */
+    get availableTests() {
+        return this.AvailableTests;
+    }
+    /** @deprecated Use {@link AvailableTests}. */
+    set availableTests(value) {
+        this.AvailableTests = value;
+    }
+    /** @deprecated Use {@link LoadingAvailableTests}. */
+    get loadingAvailableTests() {
+        return this.LoadingAvailableTests;
+    }
+    /** @deprecated Use {@link LoadingAvailableTests}. */
+    set loadingAvailableTests(value) {
+        this.LoadingAvailableTests = value;
+    }
+    /** @deprecated Use {@link SelectedTestIdsToAdd}. */
+    get selectedTestIdsToAdd() {
+        return this.SelectedTestIdsToAdd;
+    }
+    /** @deprecated Use {@link SelectedTestIdsToAdd}. */
+    set selectedTestIdsToAdd(value) {
+        this.SelectedTestIdsToAdd = value;
+    }
+    /** @deprecated Use {@link AddTestsSearch}. */
+    get addTestsSearch() {
+        return this.AddTestsSearch;
+    }
+    /** @deprecated Use {@link AddTestsSearch}. */
+    set addTestsSearch(value) {
+        this.AddTestsSearch = value;
+    }
+    /** @deprecated Use {@link IsAddingTests}. */
+    get isAddingTests() {
+        return this.IsAddingTests;
+    }
+    /** @deprecated Use {@link IsAddingTests}. */
+    set isAddingTests(value) {
+        this.IsAddingTests = value;
+    }
+    /** @deprecated Use {@link ConfirmingRemoveSuiteTestId}. */
+    get confirmingRemoveSuiteTestId() {
+        return this.ConfirmingRemoveSuiteTestId;
+    }
+    /** @deprecated Use {@link ConfirmingRemoveSuiteTestId}. */
+    set confirmingRemoveSuiteTestId(value) {
+        this.ConfirmingRemoveSuiteTestId = value;
+    }
+    /** @deprecated Use {@link IsRemovingTest}. */
+    get isRemovingTest() {
+        return this.IsRemovingTest;
+    }
+    /** @deprecated Use {@link IsRemovingTest}. */
+    set isRemovingTest(value) {
+        this.IsRemovingTest = value;
+    }
+    /** @deprecated Use {@link IsReorderingTests}. */
+    get isReorderingTests() {
+        return this.IsReorderingTests;
+    }
+    /** @deprecated Use {@link IsReorderingTests}. */
+    set isReorderingTests(value) {
+        this.IsReorderingTests = value;
+    }
+    /** @deprecated Use {@link TestingDialogService}. */
+    get testingDialogService() {
+        return this.TestingDialogService;
+    }
+    /** @deprecated Use {@link TestingDialogService}. */
+    set testingDialogService(value) {
+        this.TestingDialogService = value;
+    }
     async ngOnInit() {
         await super.ngOnInit();
         this.loadShortcutsSetting();
@@ -2089,10 +2461,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         this.evalPrefsService.preferences$
             .pipe(takeUntil(this.destroy$))
             .subscribe(prefs => {
-            this.evalPreferences = prefs;
+            this.EvalPreferences = prefs;
             this.cdr.markForCheck();
             // Re-render chart when preferences change (D3 chart needs manual update)
-            if (this.chartRendered && this.analyticsView === 'chart') {
+            if (this.chartRendered && this.AnalyticsView === 'chart') {
                 this.renderChart();
             }
         });
@@ -2100,11 +2472,11 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         this.matrixFilterSubject$
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(value => {
-            this.matrixTestFilter = value;
+            this.MatrixTestFilter = value;
             this.cdr.markForCheck();
         });
         // Subscribe to panel state changes so the slide panel renders in this form
-        this.testingDialogService.PanelStateChanged$
+        this.TestingDialogService.PanelStateChanged$
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             this.cdr.detectChanges();
@@ -2119,52 +2491,52 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
     }
     // Keyboard shortcuts
     handleKeyboardShortcut(event) {
-        if (!this.keyboardShortcutsEnabled)
+        if (!this.KeyboardShortcutsEnabled)
             return;
         // Cmd/Ctrl + S: Save (if dirty)
         if ((event.metaKey || event.ctrlKey) && event.key === 's' && !event.shiftKey) {
-            if (this.isDirty) {
+            if (this.IsDirty) {
                 event.preventDefault();
-                this.saveChanges();
+                this.SaveChanges();
             }
             return;
         }
         // Cmd/Ctrl + R: Refresh
         if ((event.metaKey || event.ctrlKey) && event.key === 'r' && !event.shiftKey) {
             event.preventDefault();
-            this.refresh();
+            this.Refresh();
             return;
         }
         // Cmd/Ctrl + Enter: Run suite
         if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
             event.preventDefault();
-            this.runSuite();
+            this.RunSuite();
             return;
         }
         // Number keys for tabs (1-5) — skip when typing into form inputs
         if (!event.metaKey && !event.ctrlKey && !event.altKey && !this.isTextInputFocused()) {
             switch (event.key) {
                 case '1':
-                    this.changeTab('overview');
+                    this.ChangeTab('overview');
                     break;
                 case '2':
-                    this.changeTab('tests');
+                    this.ChangeTab('tests');
                     break;
                 case '3':
-                    this.changeTab('runs');
+                    this.ChangeTab('runs');
                     break;
                 case '4':
-                    this.changeTab('analytics');
+                    this.ChangeTab('analytics');
                     break;
                 case '5':
-                    this.changeTab('compare');
+                    this.ChangeTab('compare');
                     break;
             }
         }
     }
     // Warn before tab close / hard navigation when there are unsaved changes
     handleBeforeUnload(event) {
-        if (this.isDirty) {
+        if (this.IsDirty) {
             event.preventDefault();
             event.returnValue = '';
         }
@@ -2176,20 +2548,24 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         const tag = el.tagName;
         return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
     }
-    changeTab(tab) {
-        this.activeTab = tab;
-        if (tab === 'tests' && !this.testsLoaded)
+    ChangeTab(tab) {
+        this.ActiveTab = tab;
+        if (tab === 'tests' && !this.TestsLoaded)
             this.loadTests();
-        if (tab === 'runs' && !this.runsLoaded)
+        if (tab === 'runs' && !this.RunsLoaded)
             this.loadRuns();
-        if (tab === 'analytics' && !this.analyticsLoaded)
+        if (tab === 'analytics' && !this.AnalyticsLoaded)
             this.loadAnalytics();
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ChangeTab}. */
+    changeTab(tab) {
+        return this.ChangeTab(tab);
+    }
     async loadTests() {
-        if (this.testsLoaded)
+        if (this.TestsLoaded)
             return;
-        this.loadingTests = true;
+        this.LoadingTests = true;
         this.cdr.markForCheck();
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
@@ -2200,22 +2576,22 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 ResultType: 'entity_object'
             });
             if (result.Success)
-                this.suiteTests = result.Results || [];
-            this.testsLoaded = true;
+                this.SuiteTests = result.Results || [];
+            this.TestsLoaded = true;
         }
         catch (error) {
             console.error('Error loading tests:', error);
             SharedService.Instance.CreateSimpleNotification('Failed to load tests', 'error', 3000);
         }
         finally {
-            this.loadingTests = false;
+            this.LoadingTests = false;
             this.cdr.markForCheck();
         }
     }
     async loadRuns() {
-        if (this.runsLoaded)
+        if (this.RunsLoaded)
             return;
-        this.loadingRuns = true;
+        this.LoadingRuns = true;
         this.cdr.markForCheck();
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
@@ -2227,19 +2603,19 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 ResultType: 'entity_object'
             });
             if (result.Success)
-                this.suiteRuns = result.Results || [];
-            this.runsLoaded = true;
+                this.SuiteRuns = result.Results || [];
+            this.RunsLoaded = true;
         }
         catch (error) {
             console.error('Error loading runs:', error);
             SharedService.Instance.CreateSimpleNotification('Failed to load runs', 'error', 3000);
         }
         finally {
-            this.loadingRuns = false;
+            this.LoadingRuns = false;
             this.cdr.markForCheck();
         }
     }
-    getStatusColor() {
+    GetStatusColor() {
         switch (this.record.Status) {
             case 'Active': return '#10b981';
             case 'Disabled': return '#6b7280';
@@ -2247,10 +2623,18 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             default: return '#9ca3af';
         }
     }
-    getStatusClass() {
+    /** @deprecated Use {@link GetStatusColor}. */
+    getStatusColor() {
+        return this.GetStatusColor();
+    }
+    GetStatusClass() {
         return `status-${this.record.Status?.toLowerCase() || 'unknown'}`;
     }
-    getRunStatusColor(status) {
+    /** @deprecated Use {@link GetStatusClass}. */
+    getStatusClass() {
+        return this.GetStatusClass();
+    }
+    GetRunStatusColor(status) {
         switch (status) {
             case 'Completed': return '#10b981';
             case 'Failed': return '#ef4444';
@@ -2260,7 +2644,11 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             default: return '#9ca3af';
         }
     }
-    formatTimeout(ms) {
+    /** @deprecated Use {@link GetRunStatusColor}. */
+    getRunStatusColor(status) {
+        return this.GetRunStatusColor(status);
+    }
+    FormatTimeout(ms) {
         if (ms === null || ms === undefined)
             return 'Default (5 min)';
         if (ms < 1000)
@@ -2276,7 +2664,11 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         const mins = Math.floor((ms % 3600000) / 60000);
         return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
     }
-    getRelativeTime(date) {
+    /** @deprecated Use {@link FormatTimeout}. */
+    formatTimeout(ms) {
+        return this.FormatTimeout(ms);
+    }
+    GetRelativeTime(date) {
         if (!date)
             return 'N/A';
         const d = new Date(date);
@@ -2295,59 +2687,83 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             return `${diffDays}d ago`;
         return d.toLocaleDateString();
     }
-    getPassRate(run) {
+    /** @deprecated Use {@link GetRelativeTime}. */
+    getRelativeTime(date) {
+        return this.GetRelativeTime(date);
+    }
+    GetPassRate(run) {
         const total = run.TotalTests || 0;
         const passed = run.PassedTests || 0;
         if (total === 0)
             return 0;
         return (passed / total) * 100;
     }
-    openTest(testId) {
+    /** @deprecated Use {@link GetPassRate}. */
+    getPassRate(run) {
+        return this.GetPassRate(run);
+    }
+    OpenTest(testId) {
         SharedService.Instance.OpenEntityRecord('MJ: Tests', CompositeKey.FromID(testId));
     }
-    openSuiteRun(runId) {
+    /** @deprecated Use {@link OpenTest}. */
+    openTest(testId) {
+        return this.OpenTest(testId);
+    }
+    OpenSuiteRun(runId) {
         SharedService.Instance.OpenEntityRecord('MJ: Test Suite Runs', CompositeKey.FromID(runId));
     }
-    navigateToTestingDashboard() {
+    /** @deprecated Use {@link OpenSuiteRun}. */
+    openSuiteRun(runId) {
+        return this.OpenSuiteRun(runId);
+    }
+    NavigateToTestingDashboard() {
         const testingApp = this.appManager.GetAppByName('Testing');
         if (testingApp) {
             this.navigationService.SwitchToApp(testingApp.ID);
         }
     }
-    async runSuite() {
+    /** @deprecated Use {@link NavigateToTestingDashboard}. */
+    navigateToTestingDashboard() {
+        return this.NavigateToTestingDashboard();
+    }
+    async RunSuite() {
         if (this.record?.ID) {
-            this.testingDialogService.OpenSuitePanel(this.record.ID);
+            this.TestingDialogService.OpenSuitePanel(this.record.ID);
         }
     }
+    /** @deprecated Use {@link RunSuite}. */
+    async runSuite() {
+        return this.RunSuite();
+    }
     OnPanelClosed() {
-        this.testingDialogService.ClosePanel();
+        this.TestingDialogService.ClosePanel();
         this.cdr.markForCheck();
     }
-    async refresh() {
+    async Refresh() {
         this.isRefreshing = true;
         this.cdr.markForCheck();
         try {
             await this.record.Load(this.record.ID);
             // Reset lazy-loaded data
-            if (this.testsLoaded) {
-                this.testsLoaded = false;
-                this.suiteTests = [];
+            if (this.TestsLoaded) {
+                this.TestsLoaded = false;
+                this.SuiteTests = [];
                 await this.loadTests();
             }
-            if (this.runsLoaded) {
-                this.runsLoaded = false;
-                this.suiteRuns = [];
+            if (this.RunsLoaded) {
+                this.RunsLoaded = false;
+                this.SuiteRuns = [];
                 await this.loadRuns();
             }
-            if (this.analyticsLoaded) {
-                this.analyticsLoaded = false;
-                this.analyticsData = [];
+            if (this.AnalyticsLoaded) {
+                this.AnalyticsLoaded = false;
+                this.AnalyticsData = [];
                 // Also reset matrix data so it reloads with fresh data
-                this.matrixLoaded = false;
-                this.matrixData = [];
+                this.MatrixLoaded = false;
+                this.MatrixData = [];
                 await this.loadAnalytics();
                 // Reload matrix if currently viewing matrix or chart view
-                if (this.analyticsView === 'matrix' || this.analyticsView === 'chart') {
+                if (this.AnalyticsView === 'matrix' || this.AnalyticsView === 'chart') {
                     await this.loadMatrixData();
                 }
             }
@@ -2361,13 +2777,17 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link Refresh}. */
+    async refresh() {
+        return this.Refresh();
+    }
     // ==========================================
     // Analytics Tab Methods
     // ==========================================
     async loadAnalytics() {
-        if (this.analyticsLoaded)
+        if (this.AnalyticsLoaded)
             return;
-        this.loadingAnalytics = true;
+        this.LoadingAnalytics = true;
         this.cdr.markForCheck();
         try {
             // Load all runs for analytics (not just recent 50)
@@ -2381,23 +2801,23 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             });
             if (result.Success && result.Results) {
                 // Process runs into analytics data points
-                this.analyticsData = result.Results.map(run => this.runToDataPoint(run));
+                this.AnalyticsData = result.Results.map(run => this.runToDataPoint(run));
                 // Extract unique tags
-                this.uniqueTags = TagsHelper.getUniqueTags(result.Results.map(r => r.Tags));
+                this.UniqueTags = TagsHelper.getUniqueTags(result.Results.map(r => r.Tags));
                 // Also populate suiteRuns if not already loaded
-                if (!this.runsLoaded) {
-                    this.suiteRuns = result.Results.slice(0, 50);
-                    this.runsLoaded = true;
+                if (!this.RunsLoaded) {
+                    this.SuiteRuns = result.Results.slice(0, 50);
+                    this.RunsLoaded = true;
                 }
             }
-            this.analyticsLoaded = true;
+            this.AnalyticsLoaded = true;
         }
         catch (error) {
             console.error('Error loading analytics:', error);
             SharedService.Instance.CreateSimpleNotification('Failed to load analytics data', 'error', 3000);
         }
         finally {
-            this.loadingAnalytics = false;
+            this.LoadingAnalytics = false;
             this.cdr.markForCheck();
         }
     }
@@ -2419,12 +2839,12 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             status: run.Status || 'Unknown'
         };
     }
-    getFilteredAnalyticsData() {
-        let data = this.analyticsData;
+    GetFilteredAnalyticsData() {
+        let data = this.AnalyticsData;
         // Apply time range filter
         const now = new Date();
         let cutoffDate = null;
-        switch (this.analyticsTimeRange) {
+        switch (this.AnalyticsTimeRange) {
             case '7d':
                 cutoffDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                 break;
@@ -2439,76 +2859,96 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             data = data.filter(d => d.date >= cutoffDate);
         }
         // Apply tag filter (multi-select: empty array means all tags)
-        if (this.selectedTags.length > 0) {
-            data = data.filter(d => this.selectedTags.some(tag => d.tags.includes(tag)));
+        if (this.SelectedTags.length > 0) {
+            data = data.filter(d => this.SelectedTags.some(tag => d.tags.includes(tag)));
         }
         return data;
     }
-    setTimeRange(range) {
-        this.analyticsTimeRange = range;
+    /** @deprecated Use {@link GetFilteredAnalyticsData}. */
+    getFilteredAnalyticsData() {
+        return this.GetFilteredAnalyticsData();
+    }
+    SetTimeRange(range) {
+        this.AnalyticsTimeRange = range;
         // Reload matrix data when time range changes (if currently viewing matrix or chart)
-        if (this.analyticsView === 'matrix' || this.analyticsView === 'chart') {
+        if (this.AnalyticsView === 'matrix' || this.AnalyticsView === 'chart') {
             this.reloadMatrixData();
         }
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link SetTimeRange}. */
+    setTimeRange(range) {
+        return this.SetTimeRange(range);
+    }
     /**
      * Toggle a tag in the multi-select filter.
      * If tag is null, clear all selections (show all tags).
      */
-    toggleTagFilter(tag) {
+    ToggleTagFilter(tag) {
         if (tag === null) {
             // Clear all - show all tags
-            this.selectedTags = [];
+            this.SelectedTags = [];
         }
         else {
             // Toggle the tag
-            const index = this.selectedTags.indexOf(tag);
+            const index = this.SelectedTags.indexOf(tag);
             if (index >= 0) {
-                this.selectedTags = this.selectedTags.filter(t => t !== tag);
+                this.SelectedTags = this.SelectedTags.filter(t => t !== tag);
             }
             else {
-                this.selectedTags = [...this.selectedTags, tag];
+                this.SelectedTags = [...this.SelectedTags, tag];
             }
         }
         // Reload matrix data when tag filter changes (if currently viewing matrix or chart)
-        if (this.analyticsView === 'matrix' || this.analyticsView === 'chart') {
+        if (this.AnalyticsView === 'matrix' || this.AnalyticsView === 'chart') {
             this.reloadMatrixData();
         }
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ToggleTagFilter}. */
+    toggleTagFilter(tag) {
+        return this.ToggleTagFilter(tag);
+    }
     /**
      * Check if a tag is currently selected in the filter
      */
+    IsTagSelected(tag) {
+        return this.SelectedTags.includes(tag);
+    }
+    /** @deprecated Use {@link IsTagSelected}. */
     isTagSelected(tag) {
-        return this.selectedTags.includes(tag);
+        return this.IsTagSelected(tag);
     }
-    setAnalyticsView(view) {
-        this.analyticsView = view;
-        if ((view === 'matrix' || view === 'chart') && !this.matrixLoaded) {
+    SetAnalyticsView(view) {
+        this.AnalyticsView = view;
+        if ((view === 'matrix' || view === 'chart') && !this.MatrixLoaded) {
             this.loadMatrixData();
         }
         // Render chart when switching to chart view
-        if (view === 'chart' && this.matrixLoaded) {
+        if (view === 'chart' && this.MatrixLoaded) {
             setTimeout(() => this.renderChart(), 100);
         }
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link SetAnalyticsView}. */
+    setAnalyticsView(view) {
+        return this.SetAnalyticsView(view);
+    }
     /**
      * Force reload of matrix data (used when filters change)
      */
     reloadMatrixData() {
-        this.matrixLoaded = false;
+        this.MatrixLoaded = false;
         this.loadMatrixData();
     }
     async loadMatrixData() {
-        if (this.loadingMatrix)
+        if (this.LoadingMatrix)
             return;
-        this.loadingMatrix = true;
+        this.LoadingMatrix = true;
         this.cdr.markForCheck();
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            const filteredRuns = this.getFilteredAnalyticsData();
+            const filteredRuns = this.GetFilteredAnalyticsData();
             // Load test runs for each suite run (limit to most recent 10 for performance)
             const runsToLoad = filteredRuns.slice(0, 10);
             const matrixData = [];
@@ -2567,10 +3007,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                     });
                 }
             }
-            this.matrixData = matrixData;
-            this.matrixLoaded = true;
+            this.MatrixData = matrixData;
+            this.MatrixLoaded = true;
             // Render chart if currently on chart view
-            if (this.analyticsView === 'chart') {
+            if (this.AnalyticsView === 'chart') {
                 setTimeout(() => this.renderChart(), 100);
             }
         }
@@ -2579,7 +3019,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification('Failed to load matrix data', 'error', 3000);
         }
         finally {
-            this.loadingMatrix = false;
+            this.LoadingMatrix = false;
             this.cdr.markForCheck();
         }
     }
@@ -2616,9 +3056,9 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         }
         return feedbackMap;
     }
-    getUniqueTestsFromMatrix() {
+    GetUniqueTestsFromMatrix() {
         const testsMap = new Map();
-        for (const runData of this.matrixData) {
+        for (const runData of this.MatrixData) {
             for (const [testId, testResult] of runData.testResults) {
                 if (!testsMap.has(testId)) {
                     testsMap.set(testId, { testName: testResult.testName, sequence: testResult.sequence });
@@ -2631,64 +3071,88 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             sequence: data.sequence
         }));
         // Apply test name filter if set
-        if (this.matrixTestFilter.trim()) {
-            const filterLower = this.matrixTestFilter.toLowerCase().trim();
+        if (this.MatrixTestFilter.trim()) {
+            const filterLower = this.MatrixTestFilter.toLowerCase().trim();
             tests = tests.filter(t => t.testName.toLowerCase().includes(filterLower));
         }
         // Apply sorting
-        if (this.matrixSortBy === 'sequence') {
-            tests = tests.sort((a, b) => this.matrixSortAsc ? a.sequence - b.sequence : b.sequence - a.sequence);
+        if (this.MatrixSortBy === 'sequence') {
+            tests = tests.sort((a, b) => this.MatrixSortAsc ? a.sequence - b.sequence : b.sequence - a.sequence);
         }
         else {
             tests = tests.sort((a, b) => {
                 const cmp = a.testName.localeCompare(b.testName);
-                return this.matrixSortAsc ? cmp : -cmp;
+                return this.MatrixSortAsc ? cmp : -cmp;
             });
         }
         return tests;
     }
+    /** @deprecated Use {@link GetUniqueTestsFromMatrix}. */
+    getUniqueTestsFromMatrix() {
+        return this.GetUniqueTestsFromMatrix();
+    }
     /**
      * Toggle matrix sort column
      */
-    toggleMatrixSort(column) {
-        if (this.matrixSortBy === column) {
-            this.matrixSortAsc = !this.matrixSortAsc;
+    ToggleMatrixSort(column) {
+        if (this.MatrixSortBy === column) {
+            this.MatrixSortAsc = !this.MatrixSortAsc;
         }
         else {
-            this.matrixSortBy = column;
-            this.matrixSortAsc = true;
+            this.MatrixSortBy = column;
+            this.MatrixSortAsc = true;
         }
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ToggleMatrixSort}. */
+    toggleMatrixSort(column) {
+        return this.ToggleMatrixSort(column);
+    }
     /**
      * Select/deselect a matrix row for highlighting
      */
-    selectMatrixRow(testId) {
-        this.selectedMatrixTestId = this.selectedMatrixTestId === testId ? null : testId;
+    SelectMatrixRow(testId) {
+        this.SelectedMatrixTestId = this.SelectedMatrixTestId === testId ? null : testId;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link SelectMatrixRow}. */
+    selectMatrixRow(testId) {
+        return this.SelectMatrixRow(testId);
+    }
     /**
      * Handle test name filter input - uses Subject for debounce
      */
-    onMatrixFilterInput(event) {
+    OnMatrixFilterInput(event) {
         const value = event.target.value;
         this.matrixFilterSubject$.next(value);
     }
+    /** @deprecated Use {@link OnMatrixFilterInput}. */
+    onMatrixFilterInput(event) {
+        return this.OnMatrixFilterInput(event);
+    }
     /**
      * Clear the matrix test name filter
      */
-    clearMatrixFilter() {
-        this.matrixTestFilter = '';
+    ClearMatrixFilter() {
+        this.MatrixTestFilter = '';
         this.matrixFilterSubject$.next('');
         this.cdr.markForCheck();
     }
-    getTestResultForRun(runId, testId) {
-        const runData = this.matrixData.find(r => r.runId === runId);
+    /** @deprecated Use {@link ClearMatrixFilter}. */
+    clearMatrixFilter() {
+        return this.ClearMatrixFilter();
+    }
+    GetTestResultForRun(runId, testId) {
+        const runData = this.MatrixData.find(r => r.runId === runId);
         if (!runData)
             return null;
         return runData.testResults.get(testId) || null;
     }
-    getMatrixCellClass(result) {
+    /** @deprecated Use {@link GetTestResultForRun}. */
+    getTestResultForRun(runId, testId) {
+        return this.GetTestResultForRun(runId, testId);
+    }
+    GetMatrixCellClass(result) {
         if (!result)
             return 'cell-none cell-not-run';
         switch (result.status) {
@@ -2701,10 +3165,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             default: return 'cell-pending';
         }
     }
+    /** @deprecated Use {@link GetMatrixCellClass}. */
+    getMatrixCellClass(result) {
+        return this.GetMatrixCellClass(result);
+    }
     /**
      * Get descriptive tooltip for execution status
      */
-    getStatusTooltip(status) {
+    GetStatusTooltip(status) {
         switch (status) {
             case 'Passed': return 'Status: Passed - Test completed without error';
             case 'Failed': return 'Status: Failed - Test assertions did not pass';
@@ -2716,10 +3184,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             default: return `Status: ${status}`;
         }
     }
+    /** @deprecated Use {@link GetStatusTooltip}. */
+    getStatusTooltip(status) {
+        return this.GetStatusTooltip(status);
+    }
     /**
      * Get tooltip for human review with rating and optional comments
      */
-    getHumanTooltip(rating, comments) {
+    GetHumanTooltip(rating, comments) {
         let tooltip = `Human Review: ${rating}/10 rating`;
         if (comments) {
             const truncated = comments.length > 200 ? comments.substring(0, 200) + '...' : comments;
@@ -2727,26 +3199,34 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         }
         return tooltip;
     }
+    /** @deprecated Use {@link GetHumanTooltip}. */
+    getHumanTooltip(rating, comments) {
+        return this.GetHumanTooltip(rating, comments);
+    }
     /**
      * Get the count of enabled evaluation types for matrix cell layout
      */
-    getEvalCount() {
+    GetEvalCount() {
         let count = 0;
-        if (this.evalPreferences.showExecution)
+        if (this.EvalPreferences.showExecution)
             count++;
-        if (this.evalPreferences.showHuman)
+        if (this.EvalPreferences.showHuman)
             count++;
-        if (this.evalPreferences.showAuto)
+        if (this.EvalPreferences.showAuto)
             count++;
         return count;
     }
+    /** @deprecated Use {@link GetEvalCount}. */
+    getEvalCount() {
+        return this.GetEvalCount();
+    }
     // ===========================
     // Matrix Totals Row Methods
     // ===========================
     /**
      * Get count of passed tests for a run
      */
-    getRunPassedCount(run) {
+    GetRunPassedCount(run) {
         let count = 0;
         run.testResults.forEach(result => {
             if (result.status === 'Passed')
@@ -2754,16 +3234,24 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         return count;
     }
+    /** @deprecated Use {@link GetRunPassedCount}. */
+    getRunPassedCount(run) {
+        return this.GetRunPassedCount(run);
+    }
     /**
      * Get total count of tests for a run
      */
-    getRunTotalCount(run) {
+    GetRunTotalCount(run) {
         return run.testResults.size;
     }
+    /** @deprecated Use {@link GetRunTotalCount}. */
+    getRunTotalCount(run) {
+        return this.GetRunTotalCount(run);
+    }
     /**
      * Get average human rating for a run (only from tests that have ratings)
      */
-    getRunHumanAvg(run) {
+    GetRunHumanAvg(run) {
         let sum = 0;
         let count = 0;
         run.testResults.forEach(result => {
@@ -2774,10 +3262,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         return count > 0 ? sum / count : null;
     }
+    /** @deprecated Use {@link GetRunHumanAvg}. */
+    getRunHumanAvg(run) {
+        return this.GetRunHumanAvg(run);
+    }
     /**
      * Get count of tests with human ratings for a run
      */
-    getRunHumanCount(run) {
+    GetRunHumanCount(run) {
         let count = 0;
         run.testResults.forEach(result => {
             if (result.humanRating != null)
@@ -2785,10 +3277,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         return count;
     }
+    /** @deprecated Use {@link GetRunHumanCount}. */
+    getRunHumanCount(run) {
+        return this.GetRunHumanCount(run);
+    }
     /**
      * Get average auto score for a run (only from tests that have scores)
      */
-    getRunAutoAvg(run) {
+    GetRunAutoAvg(run) {
         let sum = 0;
         let count = 0;
         run.testResults.forEach(result => {
@@ -2799,10 +3295,14 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         return count > 0 ? sum / count : null;
     }
+    /** @deprecated Use {@link GetRunAutoAvg}. */
+    getRunAutoAvg(run) {
+        return this.GetRunAutoAvg(run);
+    }
     /**
      * Get count of tests with auto scores for a run
      */
-    getRunAutoCount(run) {
+    GetRunAutoCount(run) {
         let count = 0;
         run.testResults.forEach(result => {
             if (result.score != null)
@@ -2810,21 +3310,33 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         return count;
     }
+    /** @deprecated Use {@link GetRunAutoCount}. */
+    getRunAutoCount(run) {
+        return this.GetRunAutoCount(run);
+    }
     /**
      * Navigate to a test run when clicking a matrix cell
      */
-    openTestRun(testRunId) {
+    OpenTestRun(testRunId) {
         SharedService.Instance.OpenEntityRecord('MJ: Test Runs', CompositeKey.FromID(testRunId));
     }
+    /** @deprecated Use {@link OpenTestRun}. */
+    openTestRun(testRunId) {
+        return this.OpenTestRun(testRunId);
+    }
     /**
      * Handle matrix cell click - navigate to the test run
      */
-    onMatrixCellClick(result, event) {
+    OnMatrixCellClick(result, event) {
         event.stopPropagation(); // Prevent row click from also firing
         if (result?.testRunId) {
-            this.openTestRun(result.testRunId);
+            this.OpenTestRun(result.testRunId);
         }
     }
+    /** @deprecated Use {@link OnMatrixCellClick}. */
+    onMatrixCellClick(result, event) {
+        return this.OnMatrixCellClick(result, event);
+    }
     // ===========================
     // D3 Chart Rendering
     // ===========================
@@ -2833,15 +3345,15 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
      * with trend lines and better visual hierarchy
      */
     renderChart() {
-        if (!this.chartContainer?.nativeElement || this.matrixData.length === 0) {
+        if (!this.ChartContainer?.nativeElement || this.MatrixData.length === 0) {
             return;
         }
-        const container = this.chartContainer.nativeElement;
-        const tests = this.getUniqueTestsFromMatrix();
-        const runs = this.matrixData;
+        const container = this.ChartContainer.nativeElement;
+        const tests = this.GetUniqueTestsFromMatrix();
+        const runs = this.MatrixData;
         // Dynamic sizing based on content and evaluation preferences
         const width = container.clientWidth || 900;
-        const evalCount = this.getEvalCount();
+        const evalCount = this.GetEvalCount();
         // Adjust row height and column width based on how many eval types are shown
         const rowHeight = evalCount >= 3 ? 34 : evalCount === 2 ? 30 : 28;
         const minColWidth = evalCount >= 3 ? 65 : evalCount === 2 ? 55 : 50;
@@ -2918,9 +3430,9 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 .attr('fill', '#475569')
                 .attr('font-size', '10px')
                 .attr('font-weight', '500')
-                .text(this.getRelativeTime(run.date))
+                .text(this.GetRelativeTime(run.date))
                 .style('cursor', 'pointer')
-                .on('click', () => this.openSuiteRun(run.runId));
+                .on('click', () => this.OpenSuiteRun(run.runId));
             // Pass rate badge
             const passRateColor = run.passRate >= 80 ? '#22c55e' : run.passRate >= 50 ? '#f97316' : '#ef4444';
             const badgeWidth = 36;
@@ -2963,7 +3475,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                         .attr('stroke', '#93c5fd')
                         .attr('stroke-width', 1)
                         .style('cursor', 'pointer')
-                        .on('click', () => this.openSuiteRun(run.runId));
+                        .on('click', () => this.OpenSuiteRun(run.runId));
                     // Tag text
                     chart.append('text')
                         .attr('x', tagX + tagPillWidth / 2)
@@ -2974,7 +3486,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                         .attr('font-weight', '600')
                         .text(tag.length > 8 ? tag.substring(0, 7) + '…' : tag)
                         .style('cursor', 'pointer')
-                        .on('click', () => this.openSuiteRun(run.runId));
+                        .on('click', () => this.OpenSuiteRun(run.runId));
                 });
                 // Show +N indicator if more tags
                 if (run.tags.length > 2) {
@@ -3061,20 +3573,20 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 }
                 // Build tooltip content based on evaluation preferences
                 const tooltipParts = [];
-                if (this.evalPreferences.showExecution) {
+                if (this.EvalPreferences.showExecution) {
                     tooltipParts.push(`<div style="display:inline-block; padding:2px 8px; border-radius:4px; background:${statusColors[result.status]}; color:white; font-size:11px; font-weight:600">${result.status}</div>`);
                 }
-                if (this.evalPreferences.showHuman) {
+                if (this.EvalPreferences.showHuman) {
                     tooltipParts.push(`<div style="margin-top:4px"><span style="color:var(--mj-status-warning)">👤</span> <strong>Human:</strong> <span style="color:var(--mj-text-disabled)">Needs review</span></div>`);
                 }
-                if (this.evalPreferences.showAuto && result.score != null) {
+                if (this.EvalPreferences.showAuto && result.score != null) {
                     tooltipParts.push(`<div style="margin-top:4px"><span style="color:var(--mj-status-info)">🤖</span> <strong>Auto:</strong> ${(result.score * 100).toFixed(1)}%</div>`);
                 }
                 const durationText = result.duration != null ? `<div><strong>Duration:</strong> ${result.duration.toFixed(2)}s</div>` : '';
                 const cellGroup = chart.append('g')
                     .attr('class', 'result-cell')
                     .style('cursor', 'pointer')
-                    .on('click', () => this.openTestRun(result.testRunId))
+                    .on('click', () => this.OpenTestRun(result.testRunId))
                     .on('mouseover', (event) => {
                     d3.select(event.currentTarget).select('rect.cell-bg')
                         .attr('stroke', '#1e40af')
@@ -3085,7 +3597,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 <div style="font-weight:600; margin-bottom:6px; color:#f1f5f9">${result.testName}</div>
                 ${tooltipParts.join('')}
                 ${durationText}
-                <div style="margin-top:6px; color:#94a3b8; font-size:10px">${this.getRelativeTime(run.date)} • Click to view</div>
+                <div style="margin-top:6px; color:#94a3b8; font-size:10px">${this.GetRelativeTime(run.date)} • Click to view</div>
               `)
                         .style('left', `${event.offsetX + 15}px`)
                         .style('top', `${event.offsetY - 10}px`);
@@ -3099,11 +3611,11 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 // Determine cell background color based on eval preferences
                 let cellBgColor = '#f1f5f9';
                 let cellBgGradient = '';
-                if (this.evalPreferences.showExecution) {
+                if (this.EvalPreferences.showExecution) {
                     // Use status-based gradient
                     cellBgGradient = `url(#gradient-${result.status.toLowerCase()})`;
                 }
-                else if (this.evalPreferences.showAuto && result.score != null) {
+                else if (this.EvalPreferences.showAuto && result.score != null) {
                     // Use score-based color
                     const scoreColor = result.score >= 0.8 ? '#22c55e' : result.score >= 0.5 ? '#f97316' : '#ef4444';
                     cellBgColor = scoreColor;
@@ -3131,7 +3643,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 const startX = x + cellWidth / 2 - ((evalCount - 1) * iconSpacing) / 2;
                 let iconIndex = 0;
                 // Status icon (execution)
-                if (this.evalPreferences.showExecution) {
+                if (this.EvalPreferences.showExecution) {
                     const iconText = {
                         'Passed': '✓',
                         'Failed': '✕',
@@ -3162,7 +3674,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                     iconIndex++;
                 }
                 // Human icon
-                if (this.evalPreferences.showHuman) {
+                if (this.EvalPreferences.showHuman) {
                     const iconX = startX + iconIndex * iconSpacing;
                     // Human evaluation indicator (clock icon for pending)
                     cellGroup.append('circle')
@@ -3183,7 +3695,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                     iconIndex++;
                 }
                 // Auto score icon/indicator
-                if (this.evalPreferences.showAuto) {
+                if (this.EvalPreferences.showAuto) {
                     const iconX = startX + iconIndex * iconSpacing;
                     if (result.score != null) {
                         const scorePercent = Math.round(result.score * 100);
@@ -3315,7 +3827,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             .text('SHOWING:');
         let xOffset = 55;
         // Status indicator
-        if (this.evalPreferences.showExecution) {
+        if (this.EvalPreferences.showExecution) {
             const statusGroup = legendGroup.append('g')
                 .attr('transform', `translate(${xOffset}, -4)`);
             statusGroup.append('circle')
@@ -3341,7 +3853,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             xOffset += 60;
         }
         // Human indicator
-        if (this.evalPreferences.showHuman) {
+        if (this.EvalPreferences.showHuman) {
             const humanGroup = legendGroup.append('g')
                 .attr('transform', `translate(${xOffset}, -4)`);
             humanGroup.append('circle')
@@ -3368,7 +3880,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             xOffset += 60;
         }
         // Auto indicator
-        if (this.evalPreferences.showAuto) {
+        if (this.EvalPreferences.showAuto) {
             const autoGroup = legendGroup.append('g')
                 .attr('transform', `translate(${xOffset}, -4)`);
             autoGroup.append('rect')
@@ -3395,26 +3907,42 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 .text('Auto');
         }
     }
-    getAveragePassRate() {
-        const data = this.getFilteredAnalyticsData();
+    GetAveragePassRate() {
+        const data = this.GetFilteredAnalyticsData();
         if (data.length === 0)
             return 0;
         return data.reduce((sum, d) => sum + d.passRate, 0) / data.length;
     }
+    /** @deprecated Use {@link GetAveragePassRate}. */
+    getAveragePassRate() {
+        return this.GetAveragePassRate();
+    }
+    GetTotalRuns() {
+        return this.GetFilteredAnalyticsData().length;
+    }
+    /** @deprecated Use {@link GetTotalRuns}. */
     getTotalRuns() {
-        return this.getFilteredAnalyticsData().length;
+        return this.GetTotalRuns();
     }
-    getAverageDuration() {
-        const data = this.getFilteredAnalyticsData();
+    GetAverageDuration() {
+        const data = this.GetFilteredAnalyticsData();
         if (data.length === 0)
             return 0;
         return data.reduce((sum, d) => sum + d.duration, 0) / data.length;
     }
+    /** @deprecated Use {@link GetAverageDuration}. */
+    getAverageDuration() {
+        return this.GetAverageDuration();
+    }
+    GetTotalCost() {
+        return this.GetFilteredAnalyticsData().reduce((sum, d) => sum + d.cost, 0);
+    }
+    /** @deprecated Use {@link GetTotalCost}. */
     getTotalCost() {
-        return this.getFilteredAnalyticsData().reduce((sum, d) => sum + d.cost, 0);
+        return this.GetTotalCost();
     }
-    getPassRateTrend() {
-        const data = this.getFilteredAnalyticsData();
+    GetPassRateTrend() {
+        const data = this.GetFilteredAnalyticsData();
         if (data.length < 2)
             return { direction: 'stable', value: 0 };
         // Compare recent half to older half
@@ -3428,6 +3956,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             return { direction: 'stable', value: diff };
         return { direction: diff > 0 ? 'up' : 'down', value: Math.abs(diff) };
     }
+    /** @deprecated Use {@link GetPassRateTrend}. */
+    getPassRateTrend() {
+        return this.GetPassRateTrend();
+    }
     formatDuration(seconds) {
         if (seconds < 60)
             return `${seconds.toFixed(1)}s`;
@@ -3440,39 +3972,55 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         const mins = Math.floor((seconds % 3600) / 60);
         return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
     }
-    formatCost(cost) {
+    FormatCost(cost) {
         if (cost < 0.01)
             return `$${cost.toFixed(6)}`;
         if (cost < 1)
             return `$${cost.toFixed(4)}`;
         return `$${cost.toFixed(2)}`;
     }
+    /** @deprecated Use {@link FormatCost}. */
+    formatCost(cost) {
+        return this.FormatCost(cost);
+    }
     // ==========================================
     // Compare Tab Methods
     // ==========================================
+    async SelectCompareRunA(run) {
+        this.CompareRunA = run;
+        await this.loadCompareData();
+    }
+    /** @deprecated Use {@link SelectCompareRunA}. */
     async selectCompareRunA(run) {
-        this.compareRunA = run;
+        return this.SelectCompareRunA(run);
+    }
+    async SelectCompareRunB(run) {
+        this.CompareRunB = run;
         await this.loadCompareData();
     }
+    /** @deprecated Use {@link SelectCompareRunB}. */
     async selectCompareRunB(run) {
-        this.compareRunB = run;
-        await this.loadCompareData();
+        return this.SelectCompareRunB(run);
     }
-    clearCompareSelection() {
-        this.compareRunA = null;
-        this.compareRunB = null;
-        this.compareResults = [];
-        this.compareRunATests = [];
-        this.compareRunBTests = [];
+    ClearCompareSelection() {
+        this.CompareRunA = null;
+        this.CompareRunB = null;
+        this.CompareResults = [];
+        this.CompareRunATests = [];
+        this.CompareRunBTests = [];
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ClearCompareSelection}. */
+    clearCompareSelection() {
+        return this.ClearCompareSelection();
+    }
     async loadCompareData() {
-        if (!this.compareRunA || !this.compareRunB) {
-            this.compareResults = [];
+        if (!this.CompareRunA || !this.CompareRunB) {
+            this.CompareResults = [];
             this.cdr.markForCheck();
             return;
         }
-        this.loadingCompare = true;
+        this.LoadingCompare = true;
         this.cdr.markForCheck();
         try {
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
@@ -3480,28 +4028,28 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             const [resultA, resultB] = await Promise.all([
                 rv.RunView({
                     EntityName: 'MJ: Test Runs',
-                    ExtraFilter: `TestSuiteRunID='${this.compareRunA.ID}'`,
+                    ExtraFilter: `TestSuiteRunID='${this.CompareRunA.ID}'`,
                     OrderBy: 'Sequence ASC',
                     ResultType: 'entity_object'
                 }),
                 rv.RunView({
                     EntityName: 'MJ: Test Runs',
-                    ExtraFilter: `TestSuiteRunID='${this.compareRunB.ID}'`,
+                    ExtraFilter: `TestSuiteRunID='${this.CompareRunB.ID}'`,
                     OrderBy: 'Sequence ASC',
                     ResultType: 'entity_object'
                 })
             ]);
-            this.compareRunATests = resultA.Success ? resultA.Results || [] : [];
-            this.compareRunBTests = resultB.Success ? resultB.Results || [] : [];
+            this.CompareRunATests = resultA.Success ? resultA.Results || [] : [];
+            this.CompareRunBTests = resultB.Success ? resultB.Results || [] : [];
             // Build comparison results
-            this.compareResults = this.buildComparisonResults(this.compareRunATests, this.compareRunBTests);
+            this.CompareResults = this.buildComparisonResults(this.CompareRunATests, this.CompareRunBTests);
         }
         catch (error) {
             console.error('Error loading comparison data:', error);
             SharedService.Instance.CreateSimpleNotification('Failed to load comparison data', 'error', 3000);
         }
         finally {
-            this.loadingCompare = false;
+            this.LoadingCompare = false;
             this.cdr.markForCheck();
         }
     }
@@ -3547,48 +4095,72 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         }
         return results;
     }
-    getComparePassRateDiff() {
-        if (!this.compareRunA || !this.compareRunB)
+    GetComparePassRateDiff() {
+        if (!this.CompareRunA || !this.CompareRunB)
             return null;
-        const rateA = this.getPassRate(this.compareRunA);
-        const rateB = this.getPassRate(this.compareRunB);
+        const rateA = this.GetPassRate(this.CompareRunA);
+        const rateB = this.GetPassRate(this.CompareRunB);
         return rateB - rateA;
     }
-    getCompareDurationDiff() {
-        if (!this.compareRunA || !this.compareRunB)
+    /** @deprecated Use {@link GetComparePassRateDiff}. */
+    getComparePassRateDiff() {
+        return this.GetComparePassRateDiff();
+    }
+    GetCompareDurationDiff() {
+        if (!this.CompareRunA || !this.CompareRunB)
             return null;
-        const durA = this.compareRunA.TotalDurationSeconds || 0;
-        const durB = this.compareRunB.TotalDurationSeconds || 0;
+        const durA = this.CompareRunA.TotalDurationSeconds || 0;
+        const durB = this.CompareRunB.TotalDurationSeconds || 0;
         return durB - durA;
     }
-    getAbsCompareDurationDiff() {
-        const diff = this.getCompareDurationDiff();
+    /** @deprecated Use {@link GetCompareDurationDiff}. */
+    getCompareDurationDiff() {
+        return this.GetCompareDurationDiff();
+    }
+    GetAbsCompareDurationDiff() {
+        const diff = this.GetCompareDurationDiff();
         return diff != null ? Math.abs(diff) : 0;
     }
-    getCompareCostDiff() {
-        if (!this.compareRunA || !this.compareRunB)
+    /** @deprecated Use {@link GetAbsCompareDurationDiff}. */
+    getAbsCompareDurationDiff() {
+        return this.GetAbsCompareDurationDiff();
+    }
+    GetCompareCostDiff() {
+        if (!this.CompareRunA || !this.CompareRunB)
             return null;
-        const costA = this.compareRunA.TotalCostUSD || 0;
-        const costB = this.compareRunB.TotalCostUSD || 0;
+        const costA = this.CompareRunA.TotalCostUSD || 0;
+        const costB = this.CompareRunB.TotalCostUSD || 0;
         return costB - costA;
     }
-    getCompareImprovedCount() {
-        return this.compareResults.filter(r => r.runA && r.runB &&
+    /** @deprecated Use {@link GetCompareCostDiff}. */
+    getCompareCostDiff() {
+        return this.GetCompareCostDiff();
+    }
+    GetCompareImprovedCount() {
+        return this.CompareResults.filter(r => r.runA && r.runB &&
             r.runA.status !== 'Passed' && r.runB.status === 'Passed').length;
     }
-    getCompareRegressedCount() {
-        return this.compareResults.filter(r => r.runA && r.runB &&
+    /** @deprecated Use {@link GetCompareImprovedCount}. */
+    getCompareImprovedCount() {
+        return this.GetCompareImprovedCount();
+    }
+    GetCompareRegressedCount() {
+        return this.CompareResults.filter(r => r.runA && r.runB &&
             r.runA.status === 'Passed' && r.runB.status !== 'Passed').length;
     }
+    /** @deprecated Use {@link GetCompareRegressedCount}. */
+    getCompareRegressedCount() {
+        return this.GetCompareRegressedCount();
+    }
     // ==========================================
     // Excel Export Methods
     // ==========================================
-    async exportToExcel() {
+    async ExportToExcel() {
         try {
             // Ensure runs are loaded
-            if (!this.runsLoaded)
+            if (!this.RunsLoaded)
                 await this.loadRuns();
-            const data = this.suiteRuns.map(run => ({
+            const data = this.SuiteRuns.map(run => ({
                 'Run ID': run.ID,
                 'Status': run.Status,
                 'Started At': run.StartedAt ? new Date(run.StartedAt).toLocaleString() : 'N/A',
@@ -3614,6 +4186,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification('Export failed', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link ExportToExcel}. */
+    async exportToExcel() {
+        return this.ExportToExcel();
+    }
     downloadAsCSV(data, filename) {
         if (data.length === 0)
             return;
@@ -3637,20 +4213,24 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         link.click();
         URL.revokeObjectURL(link.href);
     }
-    getRunTags(run) {
+    GetRunTags(run) {
         return TagsHelper.parseTags(run.Tags);
     }
+    /** @deprecated Use {@link GetRunTags}. */
+    getRunTags(run) {
+        return this.GetRunTags(run);
+    }
     /**
      * Export matrix view data to CSV
      */
-    exportMatrixToCSV() {
-        if (this.matrixData.length === 0) {
+    ExportMatrixToCSV() {
+        if (this.MatrixData.length === 0) {
             SharedService.Instance.CreateSimpleNotification('No data to export', 'warning', 2000);
             return;
         }
         try {
-            const tests = this.getUniqueTestsFromMatrix();
-            const runs = this.matrixData;
+            const tests = this.GetUniqueTestsFromMatrix();
+            const runs = this.MatrixData;
             // Build CSV rows
             const rows = [];
             for (const test of tests) {
@@ -3662,16 +4242,16 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 for (const run of runs) {
                     const result = run.testResults.get(test.testId);
                     const runLabel = run.tags.length > 0
-                        ? `${run.tags.slice(0, 2).join('/')} (${this.getRelativeTime(run.date)})`
-                        : this.getRelativeTime(run.date);
+                        ? `${run.tags.slice(0, 2).join('/')} (${this.GetRelativeTime(run.date)})`
+                        : this.GetRelativeTime(run.date);
                     if (result) {
                         // Build cell value based on what's shown
                         const parts = [];
-                        if (this.evalPreferences.showExecution)
+                        if (this.EvalPreferences.showExecution)
                             parts.push(result.status);
-                        if (this.evalPreferences.showHuman)
+                        if (this.EvalPreferences.showHuman)
                             parts.push(result.humanRating != null ? `H:${result.humanRating}` : 'H:-');
-                        if (this.evalPreferences.showAuto)
+                        if (this.EvalPreferences.showAuto)
                             parts.push(result.score != null ? `A:${Math.round(result.score * 100)}%` : 'A:-');
                         row[runLabel] = parts.join(' | ');
                     }
@@ -3689,6 +4269,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification('Export failed', 'error', 3000);
         }
     }
+    /** @deprecated Use {@link ExportMatrixToCSV}. */
+    exportMatrixToCSV() {
+        return this.ExportMatrixToCSV();
+    }
     // ==========================================
     // Keyboard Shortcuts Settings
     // ==========================================
@@ -3701,11 +4285,11 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             const setting = engine.UserSettings.find(s => s.Setting === SHORTCUTS_SETTINGS_KEY);
             if (setting) {
                 this.shortcutsSettingEntity = setting;
-                this.showShortcuts = setting.Value === 'true';
+                this.ShowShortcuts = setting.Value === 'true';
             }
             else {
                 // Default to hidden
-                this.showShortcuts = false;
+                this.ShowShortcuts = false;
             }
             this.cdr.markForCheck();
         }
@@ -3716,24 +4300,32 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
     /**
      * Toggle analytics filters visibility
      */
-    toggleFilters() {
-        this.filtersCollapsed = !this.filtersCollapsed;
+    ToggleFilters() {
+        this.FiltersCollapsed = !this.FiltersCollapsed;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ToggleFilters}. */
+    toggleFilters() {
+        return this.ToggleFilters();
+    }
     /**
      * Applies the expanded/collapsed state emitted by the filters mj-accordion-panel.
      * The panel's Expanded is the inverse of filtersCollapsed; set (not flip) so it
      * stays in sync, and mark for check (OnPush change detection).
      */
-    onFiltersExpandedChange(expanded) {
-        this.filtersCollapsed = !expanded;
+    OnFiltersExpandedChange(expanded) {
+        this.FiltersCollapsed = !expanded;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link OnFiltersExpandedChange}. */
+    onFiltersExpandedChange(expanded) {
+        return this.OnFiltersExpandedChange(expanded);
+    }
     /**
      * Toggle keyboard shortcuts visibility and save preference
      */
-    async toggleShortcuts() {
-        this.showShortcuts = !this.showShortcuts;
+    async ToggleShortcuts() {
+        this.ShowShortcuts = !this.ShowShortcuts;
         this.cdr.markForCheck();
         try {
             const userId = this.metadata.CurrentUser?.ID;
@@ -3751,34 +4343,46 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                     this.shortcutsSettingEntity.Setting = SHORTCUTS_SETTINGS_KEY;
                 }
             }
-            this.shortcutsSettingEntity.Value = this.showShortcuts ? 'true' : 'false';
+            this.shortcutsSettingEntity.Value = this.ShowShortcuts ? 'true' : 'false';
             await this.shortcutsSettingEntity.Save();
         }
         catch (error) {
             console.warn('Failed to save shortcuts setting:', error);
         }
     }
+    /** @deprecated Use {@link ToggleShortcuts}. */
+    async toggleShortcuts() {
+        return this.ToggleShortcuts();
+    }
     /** Case-insensitive UUID check whether a run is the currently selected Run A (baseline). */
     IsCompareRunA(run) {
-        return UUIDsEqual(this.compareRunA?.ID, run.ID);
+        return UUIDsEqual(this.CompareRunA?.ID, run.ID);
     }
     /** Case-insensitive UUID check whether a run is the currently selected Run B (compare). */
     IsCompareRunB(run) {
-        return UUIDsEqual(this.compareRunB?.ID, run.ID);
+        return UUIDsEqual(this.CompareRunB?.ID, run.ID);
     }
     // ==========================================
     // Edit / Save Methods
     // ==========================================
     /** True if the suite record has any unsaved field changes. */
-    get isDirty() {
+    get IsDirty() {
         return this.record?.Dirty === true;
     }
+    /** @deprecated Use {@link IsDirty}. */
+    get isDirty() {
+        return this.IsDirty;
+    }
     /** Names of fields with pending edits, used by the save bar. */
-    get dirtyFieldNames() {
+    get DirtyFieldNames() {
         if (!this.record?.Fields)
             return [];
         return this.record.Fields.filter(f => f.Dirty).map(f => f.Name);
     }
+    /** @deprecated Use {@link DirtyFieldNames}. */
+    get dirtyFieldNames() {
+        return this.DirtyFieldNames;
+    }
     /** Parsed tags as a plain array — derived from record.Tags JSON. */
     get tags() {
         return TagsHelper.parseTags(this.record?.Tags);
@@ -3797,7 +4401,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 ResultType: 'entity_object'
             });
             if (result.Success) {
-                this.parentSuiteOptions = result.Results || [];
+                this.ParentSuiteOptions = result.Results || [];
                 this.cdr.markForCheck();
             }
         }
@@ -3806,10 +4410,10 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         }
     }
     /** Save all pending changes on the suite record. */
-    async saveChanges() {
-        if (!this.isDirty || this.isSaving)
+    async SaveChanges() {
+        if (!this.IsDirty || this.IsSaving)
             return;
-        this.isSaving = true;
+        this.IsSaving = true;
         this.cdr.markForCheck();
         try {
             const ok = await this.SaveRecord(false);
@@ -3826,23 +4430,31 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
         }
         finally {
-            this.isSaving = false;
+            this.IsSaving = false;
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link SaveChanges}. */
+    async saveChanges() {
+        return this.SaveChanges();
+    }
     /** Discard all pending field changes on the suite. */
-    async discardChanges() {
-        if (!this.isDirty)
+    async DiscardChanges() {
+        if (!this.IsDirty)
             return;
         if (!(await this.confirmService.Confirm('Discard your unsaved changes?')))
             return;
         this.record.Revert();
-        this.tagDraft = '';
+        this.TagDraft = '';
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link DiscardChanges}. */
+    async discardChanges() {
+        return this.DiscardChanges();
+    }
     /** Add a tag from tagDraft (called on Enter / comma / blur). */
-    addTagFromDraft() {
-        const raw = this.tagDraft.trim();
+    AddTagFromDraft() {
+        const raw = this.TagDraft.trim();
         if (!raw)
             return;
         // Allow comma-separated entry: "alpha, beta" → two tags
@@ -3854,49 +4466,61 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 merged.push(t);
         }
         this.record.Tags = TagsHelper.toJson(merged);
-        this.tagDraft = '';
+        this.TagDraft = '';
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link AddTagFromDraft}. */
+    addTagFromDraft() {
+        return this.AddTagFromDraft();
+    }
     /** Remove a single tag. */
-    removeTag(tag) {
+    RemoveTag(tag) {
         this.record.Tags = TagsHelper.removeTag(this.record.Tags, tag);
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link RemoveTag}. */
+    removeTag(tag) {
+        return this.RemoveTag(tag);
+    }
     /** Handle Enter / comma in the tag input to commit the draft tag. */
-    onTagInputKeydown(event) {
+    OnTagInputKeydown(event) {
         if (event.key === 'Enter' || event.key === ',') {
             event.preventDefault();
-            this.addTagFromDraft();
+            this.AddTagFromDraft();
             return;
         }
         // Backspace on an empty draft pops the last chip
-        if (event.key === 'Backspace' && !this.tagDraft) {
+        if (event.key === 'Backspace' && !this.TagDraft) {
             const all = this.tags;
             if (all.length > 0) {
                 event.preventDefault();
-                this.removeTag(all[all.length - 1]);
+                this.RemoveTag(all[all.length - 1]);
             }
         }
     }
+    /** @deprecated Use {@link OnTagInputKeydown}. */
+    onTagInputKeydown(event) {
+        return this.OnTagInputKeydown(event);
+    }
     // ==========================================
     // Suite Membership: Add / Remove / Reorder Tests
     // ==========================================
     /** Empty-state message shown when the add-tests search matches nothing. */
     get AddTestsNoMatchMessage() {
-        return `No tests match "${this.addTestsSearch}".`;
+        return `No tests match "${this.AddTestsSearch}".`;
     }
     /** Open the picker dialog and load tests not yet in this suite. */
-    async openAddTestsDialog() {
-        this.showAddTestsDialog = true;
-        this.selectedTestIdsToAdd = new Set();
-        this.addTestsSearch = '';
-        this.loadingAvailableTests = true;
+    async OpenAddTestsDialog() {
+        this.ShowAddTestsDialog = true;
+        this.SelectedTestIdsToAdd = new Set();
+        this.AddTestsSearch = '';
+        this.LoadingAvailableTests = true;
         this.cdr.markForCheck();
         try {
-            if (!this.testsLoaded) {
+            if (!this.TestsLoaded) {
                 await this.loadTests();
             }
-            const existingTestIds = new Set(this.suiteTests.map(st => st.TestID));
+            const existingTestIds = new Set(this.SuiteTests.map(st => st.TestID));
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const result = await rv.RunView({
                 EntityName: 'MJ: Tests',
@@ -3904,7 +4528,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 ResultType: 'entity_object'
             });
             if (result.Success) {
-                this.availableTests = (result.Results || []).filter(t => !existingTestIds.has(t.ID));
+                this.AvailableTests = (result.Results || []).filter(t => !existingTestIds.has(t.ID));
             }
             else {
                 SharedService.Instance.CreateSimpleNotification('Failed to load tests', 'error', 3000);
@@ -3915,65 +4539,93 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification('Failed to load tests', 'error', 3000);
         }
         finally {
-            this.loadingAvailableTests = false;
+            this.LoadingAvailableTests = false;
             this.cdr.markForCheck();
         }
     }
-    closeAddTestsDialog() {
-        if (this.isAddingTests)
+    /** @deprecated Use {@link OpenAddTestsDialog}. */
+    async openAddTestsDialog() {
+        return this.OpenAddTestsDialog();
+    }
+    CloseAddTestsDialog() {
+        if (this.IsAddingTests)
             return;
-        this.showAddTestsDialog = false;
-        this.selectedTestIdsToAdd = new Set();
-        this.addTestsSearch = '';
+        this.ShowAddTestsDialog = false;
+        this.SelectedTestIdsToAdd = new Set();
+        this.AddTestsSearch = '';
         this.cdr.markForCheck();
     }
-    toggleAddSelection(testId) {
-        if (this.selectedTestIdsToAdd.has(testId)) {
-            this.selectedTestIdsToAdd.delete(testId);
+    /** @deprecated Use {@link CloseAddTestsDialog}. */
+    closeAddTestsDialog() {
+        return this.CloseAddTestsDialog();
+    }
+    ToggleAddSelection(testId) {
+        if (this.SelectedTestIdsToAdd.has(testId)) {
+            this.SelectedTestIdsToAdd.delete(testId);
         }
         else {
-            this.selectedTestIdsToAdd.add(testId);
+            this.SelectedTestIdsToAdd.add(testId);
         }
         // Set mutation alone doesn't trigger OnPush — assign a new reference
-        this.selectedTestIdsToAdd = new Set(this.selectedTestIdsToAdd);
+        this.SelectedTestIdsToAdd = new Set(this.SelectedTestIdsToAdd);
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ToggleAddSelection}. */
+    toggleAddSelection(testId) {
+        return this.ToggleAddSelection(testId);
+    }
+    IsAddSelected(testId) {
+        return this.SelectedTestIdsToAdd.has(testId);
+    }
+    /** @deprecated Use {@link IsAddSelected}. */
     isAddSelected(testId) {
-        return this.selectedTestIdsToAdd.has(testId);
+        return this.IsAddSelected(testId);
     }
     /** Tests that match the picker search filter. */
-    get filteredAvailableTests() {
-        const q = this.addTestsSearch.trim().toLowerCase();
+    get FilteredAvailableTests() {
+        const q = this.AddTestsSearch.trim().toLowerCase();
         if (!q)
-            return this.availableTests;
-        return this.availableTests.filter(t => (t.Name || '').toLowerCase().includes(q) ||
+            return this.AvailableTests;
+        return this.AvailableTests.filter(t => (t.Name || '').toLowerCase().includes(q) ||
             (t.Description || '').toLowerCase().includes(q) ||
             (t.Type || '').toLowerCase().includes(q));
     }
-    selectAllFiltered() {
-        for (const t of this.filteredAvailableTests) {
-            this.selectedTestIdsToAdd.add(t.ID);
+    /** @deprecated Use {@link FilteredAvailableTests}. */
+    get filteredAvailableTests() {
+        return this.FilteredAvailableTests;
+    }
+    SelectAllFiltered() {
+        for (const t of this.FilteredAvailableTests) {
+            this.SelectedTestIdsToAdd.add(t.ID);
         }
-        this.selectedTestIdsToAdd = new Set(this.selectedTestIdsToAdd);
+        this.SelectedTestIdsToAdd = new Set(this.SelectedTestIdsToAdd);
         this.cdr.markForCheck();
     }
-    clearAddSelection() {
-        this.selectedTestIdsToAdd = new Set();
+    /** @deprecated Use {@link SelectAllFiltered}. */
+    selectAllFiltered() {
+        return this.SelectAllFiltered();
+    }
+    ClearAddSelection() {
+        this.SelectedTestIdsToAdd = new Set();
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link ClearAddSelection}. */
+    clearAddSelection() {
+        return this.ClearAddSelection();
+    }
     /** Create suite-test rows for every selected test, appended after existing ones. */
-    async confirmAddTests() {
-        if (this.selectedTestIdsToAdd.size === 0 || this.isAddingTests)
+    async ConfirmAddTests() {
+        if (this.SelectedTestIdsToAdd.size === 0 || this.IsAddingTests)
             return;
-        this.isAddingTests = true;
+        this.IsAddingTests = true;
         this.cdr.markForCheck();
         const provider = this.ProviderToUse;
-        const startSequence = this.suiteTests.reduce((max, st) => Math.max(max, st.Sequence ?? 0), 0);
-        const idsToAdd = Array.from(this.selectedTestIdsToAdd);
+        const startSequence = this.SuiteTests.reduce((max, st) => Math.max(max, st.Sequence ?? 0), 0);
+        const idsToAdd = Array.from(this.SelectedTestIdsToAdd);
         // Snapshot test names from the picker so we can hydrate the joined "Test"
         // column on the optimistic rows (BaseEntity's joined view fields aren't
         // always populated through a TransactionGroup save).
-        const testNameById = new Map(this.availableTests.map(t => [t.ID, t.Name]));
+        const testNameById = new Map(this.AvailableTests.map(t => [t.ID, t.Name]));
         try {
             const tg = await provider.CreateTransactionGroup();
             const newRows = [];
@@ -4002,12 +4654,12 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                         }
                     }
                 }
-                this.suiteTests = [...this.suiteTests, ...newRows];
+                this.SuiteTests = [...this.SuiteTests, ...newRows];
                 this.cdr.markForCheck();
                 SharedService.Instance.CreateSimpleNotification(idsToAdd.length === 1 ? 'Test added to suite' : `${idsToAdd.length} tests added to suite`, 'success', 2000);
-                this.showAddTestsDialog = false;
-                this.selectedTestIdsToAdd = new Set();
-                this.addTestsSearch = '';
+                this.ShowAddTestsDialog = false;
+                this.SelectedTestIdsToAdd = new Set();
+                this.AddTestsSearch = '';
             }
             else {
                 const failed = newRows.find(r => r.LatestResult && !r.LatestResult.Success);
@@ -4020,35 +4672,47 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
         }
         finally {
-            this.isAddingTests = false;
+            this.IsAddingTests = false;
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link ConfirmAddTests}. */
+    async confirmAddTests() {
+        return this.ConfirmAddTests();
+    }
     /** Show the inline remove-confirm for one suite-test row. */
-    requestRemoveTest(suiteTest, event) {
+    RequestRemoveTest(suiteTest, event) {
         if (event)
             event.stopPropagation();
-        this.confirmingRemoveSuiteTestId = suiteTest.ID;
+        this.ConfirmingRemoveSuiteTestId = suiteTest.ID;
         this.cdr.markForCheck();
     }
-    cancelRemoveTest(event) {
+    /** @deprecated Use {@link RequestRemoveTest}. */
+    requestRemoveTest(suiteTest, event) {
+        return this.RequestRemoveTest(suiteTest, event);
+    }
+    CancelRemoveTest(event) {
         if (event)
             event.stopPropagation();
-        this.confirmingRemoveSuiteTestId = null;
+        this.ConfirmingRemoveSuiteTestId = null;
         this.cdr.markForCheck();
     }
+    /** @deprecated Use {@link CancelRemoveTest}. */
+    cancelRemoveTest(event) {
+        return this.CancelRemoveTest(event);
+    }
     /** Delete the suite-test join row and refresh the list. */
-    async confirmRemoveTest(suiteTest, event) {
+    async ConfirmRemoveTest(suiteTest, event) {
         if (event)
             event.stopPropagation();
-        if (this.isRemovingTest)
+        if (this.IsRemovingTest)
             return;
-        this.isRemovingTest = true;
+        this.IsRemovingTest = true;
         this.cdr.markForCheck();
         try {
             const ok = await suiteTest.Delete();
             if (ok) {
-                this.suiteTests = this.suiteTests.filter(t => !UUIDsEqual(t.ID, suiteTest.ID));
+                this.SuiteTests = this.SuiteTests.filter(t => !UUIDsEqual(t.ID, suiteTest.ID));
                 SharedService.Instance.CreateSimpleNotification('Test removed from suite', 'success', 2000);
             }
             else {
@@ -4061,19 +4725,23 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
             SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
         }
         finally {
-            this.isRemovingTest = false;
-            this.confirmingRemoveSuiteTestId = null;
+            this.IsRemovingTest = false;
+            this.ConfirmingRemoveSuiteTestId = null;
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link ConfirmRemoveTest}. */
+    async confirmRemoveTest(suiteTest, event) {
+        return this.ConfirmRemoveTest(suiteTest, event);
+    }
     /** Handle CDK drag-drop reordering — persists new Sequence values. */
-    async onTestDrop(event) {
+    async OnTestDrop(event) {
         if (event.previousIndex === event.currentIndex)
             return;
         // Optimistic reorder
-        const reordered = [...this.suiteTests];
+        const reordered = [...this.SuiteTests];
         moveItemInArray(reordered, event.previousIndex, event.currentIndex);
-        this.suiteTests = reordered;
+        this.SuiteTests = reordered;
         this.cdr.markForCheck();
         // Compute which rows actually changed sequence (1-based contiguous numbering)
         const dirty = [];
@@ -4086,7 +4754,7 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
         });
         if (dirty.length === 0)
             return;
-        this.isReorderingTests = true;
+        this.IsReorderingTests = true;
         this.cdr.markForCheck();
         const provider = this.ProviderToUse;
         try {
@@ -4100,27 +4768,31 @@ let MJTestSuiteFormComponentExtended = class MJTestSuiteFormComponentExtended ex
                 const failed = dirty.find(r => r.LatestResult && !r.LatestResult.Success);
                 const detail = failed?.LatestResult?.CompleteMessage || 'Failed to save new order';
                 SharedService.Instance.CreateSimpleNotification(detail, 'error', 4000);
-                this.testsLoaded = false;
+                this.TestsLoaded = false;
                 await this.loadTests();
             }
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : 'Failed to save new order';
             SharedService.Instance.CreateSimpleNotification(msg, 'error', 4000);
-            this.testsLoaded = false;
+            this.TestsLoaded = false;
             await this.loadTests();
         }
         finally {
-            this.isReorderingTests = false;
+            this.IsReorderingTests = false;
             this.cdr.markForCheck();
         }
     }
+    /** @deprecated Use {@link OnTestDrop}. */
+    async onTestDrop(event) {
+        return this.OnTestDrop(event);
+    }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJTestSuiteFormComponentExtended_BaseFactory; return function MJTestSuiteFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJTestSuiteFormComponentExtended_BaseFactory || (ɵMJTestSuiteFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJTestSuiteFormComponentExtended)))(__ngFactoryType__ || MJTestSuiteFormComponentExtended); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTestSuiteFormComponentExtended, selectors: [["mj-test-suite-form"]], viewQuery: function MJTestSuiteFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartContainer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ChartContainer = _t.first);
         } }, hostBindings: function MJTestSuiteFormComponentExtended_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function MJTestSuiteFormComponentExtended_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, i0.ɵɵresolveDocument)("beforeunload", function MJTestSuiteFormComponentExtended_beforeunload_HostBindingHandler($event) { return ctx.handleBeforeUnload($event); }, i0.ɵɵresolveWindow);
         } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 87, vars: 51, consts: [["tagInput", ""], ["chartContainer", ""], ["pickerSearch", ""], [1, "test-suite-form"], [1, "suite-header"], ["aria-label", "Breadcrumb", 1, "breadcrumb"], ["href", "javascript:void(0)", 3, "click"], [1, "fas", "fa-vial"], [1, "breadcrumb-text"], [1, "current"], [1, "fas", "fa-chevron-right", "separator"], [1, "fas", "fa-layer-group"], [1, "header-content"], [1, "header-left"], [1, "suite-icon"], [1, "suite-info"], ["title", "You have unsaved changes", "aria-label", "Unsaved changes", 1, "dirty-indicator"], [1, "suite-meta"], [1, "status-badge", 3, "ngClass"], [1, "fas", 3, "ngClass"], [1, "test-count"], ["title", "You have unsaved changes", 1, "unsaved-pill"], [1, "header-actions"], ["mjButton", "", "title", "Export to CSV", 3, "click"], [1, "fas", "fa-file-excel"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fas", "fa-play"], ["mjButton", "", 3, "click", "disabled"], [1, "suite-description"], [1, "tabs-container"], ["role", "tablist", 1, "tabs"], ["role", "tab", 1, "tab", 3, "click"], [1, "fas", "fa-th-large"], [1, "fas", "fa-flask"], [1, "tab-badge"], [1, "fas", "fa-history"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-balance-scale"], [1, "tab-content"], [1, "overview-tab"], [1, "tests-tab"], [1, "runs-tab"], [1, "analytics-tab"], [1, "compare-tab"], [1, "shortcuts-toggle", 3, "click", "title"], [1, "fas", "fa-keyboard"], [1, "keyboard-shortcuts"], ["Mode", "slide", 3, "Title", "Resizable"], ["role", "region", "aria-label", "Unsaved changes", 1, "save-bar"], [1, "save-bar-message"], ["aria-hidden", "true", 1, "save-bar-dot"], [1, "save-bar-text"], [1, "save-bar-fields"], [1, "save-bar-actions"], ["type", "button", "title", "Save changes (\u2318S)", 1, "save-bar-btn", "save-bar-btn--primary", 3, "click", "disabled"], ["type", "button", "title", "Discard changes", 1, "save-bar-btn", "save-bar-btn--ghost", 3, "click", "disabled"], [1, "fas", "fa-undo"], [1, "fas", "fa-circle"], [1, "edit-section"], [1, "edit-section-header"], [1, "fas", "fa-pen-to-square"], [1, "edit-section-sub"], [1, "edit-grid"], [1, "edit-field", "edit-field--full"], ["for", "suite-name"], [1, "required"], ["id", "suite-name", "type", "text", "placeholder", "e.g., Core Agent Test Suite", 1, "config-input", 3, "ngModelChange", "ngModel"], ["for", "suite-description"], ["id", "suite-description", "rows", "3", "placeholder", "What does this suite cover?", 1, "config-input", "config-textarea", 3, "ngModelChange", "ngModel"], [1, "edit-field"], ["for", "suite-status"], [1, "select-wrapper"], ["id", "suite-status", 1, "config-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], ["for", "suite-parent"], ["id", "suite-parent", 1, "config-input", 3, "ngModelChange", "ngModel"], ["for", "suite-tags"], [1, "tag-editor", 3, "click"], [1, "tag-chip-editable"], ["id", "suite-tags", "type", "text", 1, "tag-input-inline", 3, "ngModelChange", "keydown", "blur", "placeholder", "ngModel"], [1, "config-hint"], [1, "fas", "fa-cogs"], ["for", "suite-timeout"], ["id", "suite-timeout", "type", "number", "placeholder", "Default: 300000 (5 min)", 1, "config-input", 3, "ngModelChange", "ngModel"], [1, "meta-section"], [1, "meta-grid"], [1, "meta-item"], [1, "meta-label"], [1, "meta-value"], [1, "meta-value", "meta-mono"], ["type", "button", 1, "tag-remove", 3, "click"], [1, "fas", "fa-times"], [1, "tests-actionbar"], [1, "tests-actionbar-text"], [1, "tests-actionbar-count"], [1, "tests-actionbar-hint"], [1, "tests-actionbar-actions"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fas", "fa-plus"], [1, "loading-state"], ["cdkDropList", "", 1, "tests-list"], ["Icon", "fa-solid fa-flask", "Title", "No Tests in Suite", "Message", "Add tests to this suite to start running them together.", "ActionText", "Add tests", "ActionIcon", "fa-solid fa-plus"], [1, "skeleton-list"], [1, "skeleton-card"], [1, "skeleton-sequence"], [1, "skeleton-icon"], [1, "skeleton-content"], [1, "skeleton-line", "wide"], [1, "skeleton-line", "narrow"], ["cdkDropList", "", 1, "tests-list", 3, "cdkDropListDropped"], ["cdkDrag", "", 1, "test-item", 3, "cdkDragDisabled"], ["cdkDragHandle", "", "title", "Drag to reorder", "aria-label", "Drag to reorder", 1, "test-drag-handle"], [1, "fas", "fa-grip-vertical"], [1, "test-sequence"], [1, "test-icon"], [1, "test-content", 3, "click"], [1, "test-name"], [1, "test-status"], [1, "test-remove-confirm"], [1, "fas", "fa-info-circle"], [1, "test-remove-confirm", 3, "click"], [1, "test-remove-confirm-text"], ["type", "button", 1, "test-remove-confirm-btn", "test-remove-confirm-btn--danger", 3, "click", "disabled"], [1, "fas", "fa-spinner", "fa-spin"], ["type", "button", 1, "test-remove-confirm-btn", "test-remove-confirm-btn--ghost", 3, "click", "disabled"], ["type", "button", "title", "Remove from suite", "aria-label", "Remove from suite", 1, "test-remove-btn", 3, "click"], [1, "fas", "fa-chevron-right", "test-chevron", 3, "click"], ["Icon", "fa-solid fa-flask", "Title", "No Tests in Suite", "Message", "Add tests to this suite to start running them together.", "ActionText", "Add tests", "ActionIcon", "fa-solid fa-plus", 3, "Action"], [1, "runs-list"], ["Icon", "fa-solid fa-circle-play", "Title", "No Suite Runs Yet", "Message", "Run this suite to see execution history and results here.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play"], [1, "run-item"], [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"], [1, "run-eval-metrics"], [1, "eval-metric", "status", 3, "class"], ["title", "Human evaluation", 1, "eval-metric", "human"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto", 3, "high", "medium", "low"], [1, "run-tags"], [1, "fas", "fa-chevron-right"], [1, "fas", "fa-check-circle"], [1, "eval-metric", "status"], [1, "fas", "fa-user"], [1, "eval-pending"], [1, "fas", "fa-clock"], ["title", "Auto score (pass rate)", 1, "eval-metric", "auto"], [1, "fas", "fa-robot"], [1, "tag-chip"], ["Icon", "fa-solid fa-circle-play", "Title", "No Suite Runs Yet", "Message", "Run this suite to see execution history and results here.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play", 3, "Action"], ["Icon", "fa-solid fa-chart-line", "Title", "No Analytics Data", "Message", "Run this suite to start collecting analytics data.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play"], ["text", "Loading analytics data..."], [1, "analytics-subnav"], [1, "subnav-tabs"], [1, "subnav-tab", 3, "click"], [1, "fas", "fa-chart-bar"], [1, "fas", "fa-th"], [1, "fas", "fa-project-diagram"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "fas", "fa-filter", 2, "color", "var(--test-primary)"], [1, "mj-accordion-badge", "mj-accordion-badge--right", "mj-accordion-badge--muted"], [1, "filters-content"], [1, "filter-group"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-hint"], [1, "filter-buttons", "tag-filters"], [1, "filter-btn", "tag-btn", "all-tags-btn", 3, "click"], [1, "filter-btn", "tag-btn", 3, "active"], [1, "filter-btn", "tag-btn", 3, "click"], [1, "fas", "fa-check"], [1, "analytics-kpis"], [1, "kpi-card"], [1, "kpi-icon"], [1, "fas", "fa-play-circle"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "success"], [1, "kpi-trend", 3, "ngClass"], [1, "kpi-icon", "info"], [1, "kpi-icon", "warning"], [1, "fas", "fa-dollar-sign"], [1, "analytics-table-section"], [1, "fas", "fa-table"], [1, "analytics-table-wrapper"], [1, "analytics-table"], [1, "clickable-row"], ["Variant", "no-results", "Size", "compact", "Title", "No runs match the current filters."], [1, "clickable-row", 3, "click"], [1, "status-chip", 3, "ngClass"], [1, "pass-rate-cell"], [1, "pass-rate-bar", 3, "ngClass"], [1, "tag-cell"], [1, "tag-chip-table"], [1, "tag-more"], [1, "matrix-section"], ["Variant", "no-results", "Icon", "fa-solid fa-table-cells", "Title", "No Matrix Data", "Message", "No suite runs match the current filters."], ["text", "Loading test matrix..."], [1, "matrix-header"], [1, "matrix-header-right"], [1, "matrix-filter-input"], [1, "fas", "fa-search"], ["type", "text", "placeholder", "Filter tests...", 1, "filter-input", 3, "input", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], [1, "matrix-run-count"], ["mjButton", "", "title", "Export matrix to CSV", 3, "click", "disabled"], [1, "fas", "fa-download"], [1, "matrix-scroll-container"], [1, "test-matrix"], ["title", "Sort by sequence", 1, "seq-header", 3, "click"], ["title", "Sort by name", 1, "test-name-header", 3, "click"], [1, "run-header", 3, "title"], [1, "spacer-header"], [3, "row-selected"], [1, "totals-row"], [1, "seq-cell", "totals-label"], [1, "test-name-cell", "totals-label"], [1, "result-cell", "totals-cell"], [1, "spacer-cell"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "run-header", 3, "click", "title"], [1, "run-header-content"], [1, "run-tags-header"], [1, "run-date"], [1, "run-pass-rate", 3, "ngClass"], [1, "tag-chip-header"], [1, "tag-more-header"], [3, "click"], [1, "seq-cell"], [1, "test-name-cell"], [1, "test-name", 3, "title"], [1, "result-cell", 3, "ngClass", "clickable", "cell-not-run", "title"], [1, "result-cell", 3, "click", "ngClass", "title"], [1, "cell-eval-stack"], [1, "cell-not-run-indicator"], [1, "cell-status", 3, "ngClass", "cell-skipped-status", "title"], ["title", "Human Review: No rating submitted yet", 1, "cell-human", "no-feedback"], [1, "cell-human", "has-feedback", 3, "rating-low", "rating-medium", "rating-good", "rating-excellent", "title"], [1, "cell-auto", "has-score", 3, "score-low", "score-medium", "score-good", "score-excellent", "title"], ["title", "Auto Score: No automated score available", 1, "cell-auto", "no-score"], [1, "cell-status", 3, "ngClass", "title"], [1, "fas", "fa-user-slash"], [1, "cell-human", "has-feedback", 3, "title"], [1, "rating-value"], [1, "cell-auto", "has-score", 3, "title"], [1, "score-value"], [1, "fas", "fa-minus"], [1, "cell-eval-stack", "totals-stack"], [1, "totals-status"], [1, "totals-human"], [1, "totals-auto"], [1, "pass-count"], [1, "avg-label"], [1, "count-label"], [1, "chart-section"], ["Variant", "no-results", "Icon", "fa-solid fa-diagram-project", "Title", "No Chart Data", "Message", "No suite runs match the current filters."], ["text", "Loading chart data..."], [1, "chart-header"], [1, "chart-legend"], [1, "legend-item", "chart-passed"], [1, "legend-item", "chart-failed"], [1, "legend-item", "chart-error"], [1, "fas", "fa-exclamation"], [1, "legend-item", "chart-skipped"], [1, "fas", "fa-forward"], [1, "chart-container"], [1, "d3-chart"], [1, "chart-info"], ["Icon", "fa-solid fa-chart-line", "Title", "No Analytics Data", "Message", "Run this suite to start collecting analytics data.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play", 3, "Action"], [1, "compare-selection"], [1, "compare-run-selector"], [1, "run-selector-list"], [1, "selected-run-preview"], [1, "compare-vs"], [1, "fas", "fa-exchange-alt"], [1, "compare-results"], ["Icon", "fa-solid fa-scale-balanced", "Title", "Select Two Runs to Compare", "Message", "Choose a baseline run (A) and a comparison run (B) from the lists above to see a detailed side-by-side comparison."], ["Icon", "fa-solid fa-scale-balanced", "Title", "Not Enough Runs to Compare", "Message", "You need at least 2 suite runs to use the comparison feature.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play"], [1, "run-selector-item", 3, "selected"], [1, "run-selector-item", 3, "click"], [1, "selector-status"], [1, "selector-content"], [1, "selector-date"], [1, "selector-rate"], [1, "selector-tags"], [1, "tag-mini"], [1, "preview-header"], [1, "preview-label"], [1, "clear-btn", 3, "click"], [1, "preview-details"], [1, "preview-rate"], [1, "run-selector-item", 3, "selected", "disabled"], [1, "compare-summary"], [1, "compare-summary-card"], [1, "summary-label"], [1, "summary-value", 3, "ngClass"], [1, "compare-summary-card", "improved"], [1, "summary-value"], [1, "compare-summary-card", "regressed"], [1, "compare-table-section"], [1, "fas", "fa-list"], [1, "compare-table-wrapper"], [1, "compare-table"], [3, "ngClass"], [1, "status-chip", "status-missing"], [1, "muted"], [1, "change-indicator", "improved"], [1, "change-indicator", "regressed"], [1, "change-indicator", "unchanged"], [1, "fas", "fa-arrow-up"], [1, "fas", "fa-arrow-down"], ["text", "Loading comparison data..."], ["Icon", "fa-solid fa-scale-balanced", "Title", "Not Enough Runs to Compare", "Message", "You need at least 2 suite runs to use the comparison feature.", "ActionText", "Run Suite Now", "ActionIcon", "fa-solid fa-play", 3, "Action"], [1, "shortcuts-header"], ["title", "Hide shortcuts", 1, "shortcuts-close", 3, "click"], [1, "shortcut-list"], [1, "shortcut-item"], [1, "shortcut-keys"], ["Mode", "slide", 3, "Closed", "Title", "Resizable"], [3, "PanelClose", "PanelMode", "selectedTestId", "selectedSuiteId", "runMode"], [1, "picker-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "add-tests-dialog-title", 1, "picker-dialog", 3, "click"], [1, "picker-header"], ["id", "add-tests-dialog-title", 1, "picker-title"], [1, "fas", "fa-plus-circle"], ["type", "button", "aria-label", "Close", 1, "picker-close", 3, "click", "disabled"], [1, "picker-search"], [1, "fas", "fa-search", "picker-search-icon"], ["type", "text", "placeholder", "Search tests by name, description, or type...", "autofocus", "", 1, "picker-search-input", 3, "ngModelChange", "ngModel"], ["type", "button", "aria-label", "Clear search", 1, "picker-search-clear"], [1, "picker-toolbar"], [1, "picker-toolbar-status"], [1, "picker-toolbar-actions"], ["type", "button", 1, "picker-link-btn", 3, "click", "disabled"], [1, "picker-body"], [1, "picker-loading"], [1, "picker-list"], [1, "picker-footer"], ["type", "button", 1, "picker-btn", "picker-btn--primary", 3, "click", "disabled"], ["type", "button", 1, "picker-btn", "picker-btn--ghost", 3, "click", "disabled"], ["type", "button", "aria-label", "Clear search", 1, "picker-search-clear", 3, "click"], ["text", "Loading tests..."], ["Variant", "success", "Size", "compact", "Title", "Everything's already in the suite", "Message", "This suite contains every available test. Create a new test first to add more."], ["Variant", "no-results", "Size", "compact", "Title", "No matches", 3, "Message"], ["role", "checkbox", "tabindex", "0", 1, "picker-row", 3, "picker-row--selected"], ["role", "checkbox", "tabindex", "0", 1, "picker-row", 3, "click"], [1, "picker-check"], [1, "picker-row-main"], [1, "picker-row-name"], [1, "picker-row-desc"], [1, "picker-row-meta"], [1, "picker-row-pill"], [1, "picker-row-pill", "picker-row-pill--status"], [1, "save-bar-kbd"]], template: function MJTestSuiteFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
@@ -4315,7 +4987,7 @@ export { MJTestSuiteFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTestSuiteFormComponentExtended, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-test-suite-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-suite-form\">\n  <!-- Header Section -->\n  <div class=\"suite-header\">\n    <!-- Breadcrumb Navigation -->\n    <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol>\n        <li>\n          <a href=\"javascript:void(0)\" (click)=\"navigateToTestingDashboard()\">\n            <i class=\"fas fa-vial\"></i>\n            <span class=\"breadcrumb-text\">Testing</span>\n          </a>\n        </li>\n        <li class=\"current\">\n          <i class=\"fas fa-chevron-right separator\"></i>\n          <i class=\"fas fa-layer-group\"></i>\n          <span>{{ record.Name }}</span>\n        </li>\n      </ol>\n    </nav>\n\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <div class=\"suite-icon\" [style.background-color]=\"getStatusColor()\">\n          <i class=\"fas fa-layer-group\"></i>\n        </div>\n        <div class=\"suite-info\">\n          <h1>\n            {{ record.Name }}\n            @if (isDirty) {\n              <span class=\"dirty-indicator\" title=\"You have unsaved changes\" aria-label=\"Unsaved changes\">\u25CF</span>\n            }\n          </h1>\n          <div class=\"suite-meta\">\n            <span class=\"status-badge\" [ngClass]=\"getStatusClass()\">\n              <i class=\"fas\" [ngClass]=\"record.Status === 'Active' ? 'fa-circle-check' : 'fa-circle-pause'\"></i>\n              {{ record.Status }}\n            </span>\n            @if (testsLoaded) {\n              <span class=\"test-count\">\n                <i class=\"fas fa-flask\"></i>\n                {{ suiteTests.length }} tests\n              </span>\n            }\n            @if (isDirty) {\n              <span class=\"unsaved-pill\" title=\"You have unsaved changes\">\n                <i class=\"fas fa-circle\"></i> Unsaved\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        <app-evaluation-mode-toggle></app-evaluation-mode-toggle>\n        <button mjButton (click)=\"exportToExcel()\" title=\"Export to CSV\">\n          <i class=\"fas fa-file-excel\"></i> Export\n        </button>\n        <button mjButton (click)=\"runSuite()\" variant=\"primary\">\n          <i class=\"fas fa-play\"></i> Run Suite\n        </button>\n        <button mjButton (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    @if (record.Description) {\n      <div class=\"suite-description\">\n        <p>{{ record.Description }}</p>\n      </div>\n    }\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> Overview\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'tests'\"\n        (click)=\"changeTab('tests')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'tests'\">\n        <i class=\"fas fa-flask\"></i> Tests\n        @if (testsLoaded) {\n          <span class=\"tab-badge\">{{ suiteTests.length }}</span>\n        }\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> Runs\n        @if (runsLoaded) {\n          <span class=\"tab-badge\">{{ suiteRuns.length }}</span>\n        }\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> Analytics\n      </button>\n      <button class=\"tab\"\n        [class.active]=\"activeTab === 'compare'\"\n        (click)=\"changeTab('compare')\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeTab === 'compare'\">\n        <i class=\"fas fa-balance-scale\"></i> Compare\n      </button>\n    </div>\n  </div>\n\n  <!-- Tab Content -->\n  <div class=\"tab-content\" [class.has-savebar]=\"isDirty\">\n    <!-- Overview Tab -->\n    @if (activeTab === 'overview') {\n      <div class=\"overview-tab\">\n        <!-- Editable Details -->\n        <section class=\"edit-section\">\n          <header class=\"edit-section-header\">\n            <h3><i class=\"fas fa-pen-to-square\"></i> Details</h3>\n            <p class=\"edit-section-sub\">Edit any field \u2014 changes are saved with the bar at the bottom.</p>\n          </header>\n          <div class=\"edit-grid\">\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-name\">Name <span class=\"required\">*</span></label>\n              <input\n                id=\"suite-name\"\n                type=\"text\"\n                class=\"config-input\"\n                placeholder=\"e.g., Core Agent Test Suite\"\n                [(ngModel)]=\"record.Name\"\n              />\n            </div>\n\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-description\">Description</label>\n              <textarea\n                id=\"suite-description\"\n                class=\"config-input config-textarea\"\n                rows=\"3\"\n                placeholder=\"What does this suite cover?\"\n                [ngModel]=\"record.Description\"\n                (ngModelChange)=\"record.Description = $event || null\"\n              ></textarea>\n            </div>\n\n            <div class=\"edit-field\">\n              <label for=\"suite-status\">Status</label>\n              <div class=\"select-wrapper\">\n                <select\n                  id=\"suite-status\"\n                  class=\"config-input\"\n                  [(ngModel)]=\"record.Status\"\n                >\n                  @for (opt of statusOptions; track opt) {\n                    <option [ngValue]=\"opt\">{{ opt }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"edit-field\">\n              <label for=\"suite-parent\">Parent Suite</label>\n              <select\n                id=\"suite-parent\"\n                class=\"config-input\"\n                [ngModel]=\"record.ParentID\"\n                (ngModelChange)=\"record.ParentID = $event || null\"\n              >\n                <option [ngValue]=\"null\">\u2014 None (top-level) \u2014</option>\n                @for (s of parentSuiteOptions; track s.ID) {\n                  <option [ngValue]=\"s.ID\">{{ s.Name }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"edit-field edit-field--full\">\n              <label for=\"suite-tags\">Tags</label>\n              <div class=\"tag-editor\" (click)=\"tagInput.focus()\">\n                @for (tag of tags; track tag) {\n                  <span class=\"tag-chip-editable\">\n                    {{ tag }}\n                    <button type=\"button\" class=\"tag-remove\" (click)=\"removeTag(tag); $event.stopPropagation()\" [attr.aria-label]=\"'Remove tag ' + tag\">\n                      <i class=\"fas fa-times\"></i>\n                    </button>\n                  </span>\n                }\n                <input\n                  #tagInput\n                  id=\"suite-tags\"\n                  type=\"text\"\n                  class=\"tag-input-inline\"\n                  [placeholder]=\"tags.length === 0 ? 'Add tags, press Enter or comma...' : ''\"\n                  [(ngModel)]=\"tagDraft\"\n                  (keydown)=\"onTagInputKeydown($event)\"\n                  (blur)=\"addTagFromDraft()\"\n                />\n              </div>\n              <span class=\"config-hint\">Press Enter or comma to add a tag. Backspace on empty input removes the last tag.</span>\n            </div>\n          </div>\n        </section>\n\n        <!-- Execution Settings -->\n        <section class=\"edit-section\">\n          <header class=\"edit-section-header\">\n            <h3><i class=\"fas fa-cogs\"></i> Execution Settings</h3>\n          </header>\n          <div class=\"edit-grid\">\n            <div class=\"edit-field\">\n              <label for=\"suite-timeout\">Max Execution Time (ms)</label>\n              <input\n                id=\"suite-timeout\"\n                type=\"number\"\n                class=\"config-input\"\n                placeholder=\"Default: 300000 (5 min)\"\n                [ngModel]=\"record.MaxExecutionTimeMS\"\n                (ngModelChange)=\"record.MaxExecutionTimeMS = $event === '' || $event === null ? null : +$event\"\n              />\n              <span class=\"config-hint\">Default timeout for tests in this suite. Currently: {{ formatTimeout(record.MaxExecutionTimeMS) }}</span>\n            </div>\n          </div>\n        </section>\n\n        <!-- Metadata (read-only) -->\n        <section class=\"meta-section\">\n          <div class=\"meta-grid\">\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Created</div>\n              <div class=\"meta-value\">{{ record.__mj_CreatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Last updated</div>\n              <div class=\"meta-value\">{{ record.__mj_UpdatedAt | date:'medium' }}</div>\n            </div>\n            <div class=\"meta-item\">\n              <div class=\"meta-label\">Suite ID</div>\n              <div class=\"meta-value meta-mono\">{{ record.ID }}</div>\n            </div>\n          </div>\n        </section>\n      </div>\n    }\n\n    <!-- Tests Tab -->\n    @if (activeTab === 'tests') {\n      <div class=\"tests-tab\">\n        <!-- Header: action bar -->\n        <div class=\"tests-actionbar\">\n          <div class=\"tests-actionbar-text\">\n            <strong>Suite tests</strong>\n            @if (testsLoaded) {\n              <span class=\"tests-actionbar-count\">{{ suiteTests.length }}</span>\n            }\n            <span class=\"tests-actionbar-hint\">Drag to reorder \u00B7 Hover a row to remove</span>\n          </div>\n          <div class=\"tests-actionbar-actions\">\n            <button mjButton variant=\"primary\" (click)=\"openAddTestsDialog()\" [disabled]=\"isReorderingTests\">\n              <i class=\"fas fa-plus\"></i> Add tests\n            </button>\n          </div>\n        </div>\n\n        <!-- Loading State -->\n        @if (loadingTests) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3,4,5]; track i) {\n                <div class=\"skeleton-card\">\n                  <div class=\"skeleton-sequence\"></div>\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              }\n            </div>\n          </div>\n        }\n        <!-- Tests List -->\n        @if (!loadingTests && suiteTests.length > 0) {\n          <div class=\"tests-list\" cdkDropList (cdkDropListDropped)=\"onTestDrop($event)\">\n            @for (test of suiteTests; track test.ID) {\n              <div class=\"test-item\" cdkDrag [cdkDragDisabled]=\"isReorderingTests || isRemovingTest\">\n                <span class=\"test-drag-handle\" cdkDragHandle title=\"Drag to reorder\" aria-label=\"Drag to reorder\">\n                  <i class=\"fas fa-grip-vertical\"></i>\n                </span>\n                <div class=\"test-sequence\">{{ test.Sequence }}</div>\n                <div class=\"test-icon\"><i class=\"fas fa-flask\"></i></div>\n                <div class=\"test-content\" (click)=\"openTest(test.TestID)\">\n                  <div class=\"test-name\">{{ test.Test }}</div>\n                  <div class=\"test-status\">\n                    @if (test.Status) {\n                      <span><i class=\"fas fa-info-circle\"></i> {{ test.Status }}</span>\n                    }\n                  </div>\n                </div>\n                <!-- Inline remove confirm OR hover-reveal X -->\n                @if (confirmingRemoveSuiteTestId === test.ID) {\n                  <div class=\"test-remove-confirm\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"test-remove-confirm-text\">Remove from suite?</span>\n                    <button\n                      type=\"button\"\n                      class=\"test-remove-confirm-btn test-remove-confirm-btn--danger\"\n                      (click)=\"confirmRemoveTest(test, $event)\"\n                      [disabled]=\"isRemovingTest\"\n                    >\n                      @if (isRemovingTest) {\n                        <i class=\"fas fa-spinner fa-spin\"></i>\n                      } @else {\n                        Remove\n                      }\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"test-remove-confirm-btn test-remove-confirm-btn--ghost\"\n                      (click)=\"cancelRemoveTest($event)\"\n                      [disabled]=\"isRemovingTest\"\n                    >\n                      Cancel\n                    </button>\n                  </div>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"test-remove-btn\"\n                    title=\"Remove from suite\"\n                    aria-label=\"Remove from suite\"\n                    (click)=\"requestRemoveTest(test, $event)\"\n                  >\n                    <i class=\"fas fa-times\"></i>\n                  </button>\n                  <i class=\"fas fa-chevron-right test-chevron\" (click)=\"openTest(test.TestID)\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (testsLoaded && !loadingTests && suiteTests.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-flask\"\n            Title=\"No Tests in Suite\"\n            Message=\"Add tests to this suite to start running them together.\"\n            ActionText=\"Add tests\"\n            ActionIcon=\"fa-solid fa-plus\"\n            (Action)=\"openAddTestsDialog()\" />\n        }\n      </div>\n    }\n\n    <!-- Runs Tab -->\n    @if (activeTab === 'runs') {\n      <div class=\"runs-tab\">\n        <!-- Loading State -->\n        @if (loadingRuns) {\n          <div class=\"loading-state\">\n            <div class=\"skeleton-list\">\n              @for (i of [1,2,3]; track i) {\n                <div class=\"skeleton-card\">\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              }\n            </div>\n          </div>\n        }\n        <!-- Runs List -->\n        @if (!loadingRuns && suiteRuns.length > 0) {\n          <div class=\"runs-list\">\n            @for (run of suiteRuns; track run) {\n              <div class=\"run-item\" (click)=\"openSuiteRun(run.ID)\">\n                <div class=\"run-icon\" [style.background-color]=\"getRunStatusColor(run.Status)\">\n                  <i class=\"fas\"\n                    [class.fa-check]=\"run.Status === 'Completed'\"\n                    [class.fa-times]=\"run.Status === 'Failed'\"\n                    [class.fa-spinner]=\"run.Status === 'Running'\"\n                    [class.fa-clock]=\"run.Status === 'Pending'\"\n                  [class.fa-ban]=\"run.Status === 'Cancelled'\"></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                    @if (run.TotalTests) {\n                      <span>\n                        <i class=\"fas fa-check-circle\"></i> {{ run.PassedTests }}/{{ run.TotalTests }}\n                        ({{ getPassRate(run).toFixed(0) }}%)\n                      </span>\n                    }\n                  </div>\n                  <!-- Evaluation metrics row -->\n                  <div class=\"run-eval-metrics\">\n                    <!-- Status badge -->\n                    @if (evalPreferences.showExecution) {\n                      <span class=\"eval-metric status\" [class]=\"'status-' + run.Status.toLowerCase()\">\n                        <i class=\"fas\"\n                          [class.fa-circle-check]=\"run.Status === 'Completed'\"\n                          [class.fa-circle-xmark]=\"run.Status === 'Failed'\"\n                          [class.fa-spinner]=\"run.Status === 'Running'\"\n                          [class.fa-clock]=\"run.Status === 'Pending'\"\n                        [class.fa-ban]=\"run.Status === 'Cancelled'\"></i>\n                      </span>\n                    }\n                    <!-- Human score (placeholder - need avg from suite run) -->\n                    @if (evalPreferences.showHuman) {\n                      <span class=\"eval-metric human\" title=\"Human evaluation\">\n                        <i class=\"fas fa-user\"></i>\n                        <span class=\"eval-pending\"><i class=\"fas fa-clock\"></i></span>\n                      </span>\n                    }\n                    <!-- Auto score (pass rate as proxy) -->\n                    @if (evalPreferences.showAuto && run.TotalTests) {\n                      <span class=\"eval-metric auto\"\n                        [class.high]=\"getPassRate(run) >= 80\"\n                        [class.medium]=\"getPassRate(run) >= 50 && getPassRate(run) < 80\"\n                        [class.low]=\"getPassRate(run) < 50\"\n                        title=\"Auto score (pass rate)\">\n                        <i class=\"fas fa-robot\"></i>\n                        <span>{{ getPassRate(run).toFixed(0) }}%</span>\n                      </span>\n                    }\n                  </div>\n                  <!-- Tags display -->\n                  @if (getRunTags(run).length > 0) {\n                    <div class=\"run-tags\">\n                      @for (tag of getRunTags(run); track tag) {\n                        <span class=\"tag-chip\">{{ tag }}</span>\n                      }\n                    </div>\n                  }\n                </div>\n                <i class=\"fas fa-chevron-right\"></i>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty State -->\n        @if (runsLoaded && !loadingRuns && suiteRuns.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-circle-play\"\n            Title=\"No Suite Runs Yet\"\n            Message=\"Run this suite to see execution history and results here.\"\n            ActionText=\"Run Suite Now\"\n            ActionIcon=\"fa-solid fa-play\"\n            (Action)=\"runSuite()\" />\n        }\n      </div>\n    }\n\n    <!-- Analytics Tab -->\n    @if (activeTab === 'analytics') {\n      <div class=\"analytics-tab\">\n        <!-- Loading State -->\n        @if (loadingAnalytics) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading analytics data...\"></mj-loading>\n          </div>\n        }\n        @if (!loadingAnalytics && analyticsLoaded) {\n          <!-- View Toggle Sub-nav -->\n          <div class=\"analytics-subnav\">\n            <div class=\"subnav-tabs\">\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'summary'\"\n                (click)=\"setAnalyticsView('summary')\">\n                <i class=\"fas fa-chart-bar\"></i>\n                <span>Summary</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'matrix'\"\n                (click)=\"setAnalyticsView('matrix')\">\n                <i class=\"fas fa-th\"></i>\n                <span>Matrix</span>\n              </button>\n              <button class=\"subnav-tab\"\n                [class.active]=\"analyticsView === 'chart'\"\n                (click)=\"setAnalyticsView('chart')\">\n                <i class=\"fas fa-project-diagram\"></i>\n                <span>Chart</span>\n              </button>\n            </div>\n          </div>\n          <!-- Collapsible Filters (shared by both views) -->\n          <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n            [Expanded]=\"!filtersCollapsed\" (ExpandedChange)=\"onFiltersExpandedChange($event)\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-filter\" style=\"color: var(--test-primary);\"></i>\n              Filters\n              @if (filtersCollapsed) {\n                <span class=\"mj-accordion-badge mj-accordion-badge--right mj-accordion-badge--muted\">\n                  {{ analyticsTimeRange === 'all' ? 'All Time' : analyticsTimeRange }}\n                  @if (selectedTags.length > 0) {\n                    <span> \u00B7 {{ selectedTags.length }} tags</span>\n                  }\n                </span>\n              }\n            </ng-template>\n            <ng-template mjAccordionBody>\n              <div class=\"filters-content\">\n                <div class=\"filter-group\">\n                  <label>Time Range</label>\n                  <div class=\"filter-buttons\">\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '7d'\" (click)=\"setTimeRange('7d')\">7 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '30d'\" (click)=\"setTimeRange('30d')\">30 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === '90d'\" (click)=\"setTimeRange('90d')\">90 Days</button>\n                    <button class=\"filter-btn\" [class.active]=\"analyticsTimeRange === 'all'\" (click)=\"setTimeRange('all')\">All Time</button>\n                  </div>\n                </div>\n                @if (uniqueTags.length > 0) {\n                  <div class=\"filter-group\">\n                    <label>Filter by Tag @if (selectedTags.length > 0) {\n                      <span class=\"filter-hint\">({{ selectedTags.length }} selected)</span>\n                    }</label>\n                    <div class=\"filter-buttons tag-filters\">\n                      <button class=\"filter-btn tag-btn all-tags-btn\"\n                        [class.active]=\"selectedTags.length === 0\"\n                        (click)=\"toggleTagFilter(null)\">\n                        <i class=\"fas fa-layer-group\"></i> All Tags\n                      </button>\n                      @for (tag of uniqueTags; track tag) {\n                        <button class=\"filter-btn tag-btn\"\n                          [class.active]=\"isTagSelected(tag)\"\n                          (click)=\"toggleTagFilter(tag)\">\n                          @if (isTagSelected(tag)) {\n                            <i class=\"fas fa-check\"></i>\n                          }\n                          {{ tag }}\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </ng-template>\n          </mj-accordion-panel>\n          <!-- Summary View -->\n          @if (analyticsView === 'summary') {\n            <!-- KPI Cards -->\n            <div class=\"analytics-kpis\">\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon\"><i class=\"fas fa-play-circle\"></i></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\">\n                <div class=\"kpi-icon success\"><i class=\"fas fa-check-circle\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ getAveragePassRate().toFixed(1) }}%</div>\n                  <div class=\"kpi-label\">Avg Pass Rate</div>\n                  <div class=\"kpi-trend\" [ngClass]=\"{'trend-up': getPassRateTrend().direction === 'up', 'trend-down': getPassRateTrend().direction === 'down'}\">\n                    <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getPassRateTrend().direction === 'up', 'fa-arrow-down': getPassRateTrend().direction === 'down', 'fa-minus': getPassRateTrend().direction === 'stable'}\"></i>\n                    {{ getPassRateTrend().value.toFixed(1) }}%\n                  </div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon info\"><i class=\"fas fa-clock\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatDuration(getAverageDuration()) }}</div>\n                  <div class=\"kpi-label\">Avg Duration</div>\n                </div>\n              </div>\n              <div class=\"kpi-card\">\n                <div class=\"kpi-icon warning\"><i class=\"fas fa-dollar-sign\"></i></div>\n                <div class=\"kpi-content\">\n                  <div class=\"kpi-value\">{{ formatCost(getTotalCost()) }}</div>\n                  <div class=\"kpi-label\">Total Cost</div>\n                </div>\n              </div>\n            </div>\n            <!-- Runs Table -->\n            <div class=\"analytics-table-section\">\n              <h3><i class=\"fas fa-table\"></i> Run History</h3>\n              <div class=\"analytics-table-wrapper\">\n                <table class=\"analytics-table\">\n                  <thead>\n                    <tr>\n                      <th>Date</th>\n                      <th>Status</th>\n                      <th>Pass Rate</th>\n                      <th>Tests</th>\n                      <th>Duration</th>\n                      <th>Cost</th>\n                      <th>Tags</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (dp of getFilteredAnalyticsData(); track dp) {\n                      <tr (click)=\"openSuiteRun(dp.runId)\" class=\"clickable-row\">\n                        <td>{{ dp.date | date:'short' }}</td>\n                        <td>\n                          <span class=\"status-chip\" [ngClass]=\"'status-' + dp.status.toLowerCase()\">{{ dp.status }}</span>\n                        </td>\n                        <td>\n                          <div class=\"pass-rate-cell\">\n                            <div class=\"pass-rate-bar\" [style.width.%]=\"dp.passRate\" [ngClass]=\"{'high': dp.passRate >= 80, 'medium': dp.passRate >= 50 && dp.passRate < 80, 'low': dp.passRate < 50}\"></div>\n                            <span>{{ dp.passRate.toFixed(0) }}%</span>\n                          </div>\n                        </td>\n                        <td>{{ dp.passedTests }}/{{ dp.totalTests }}</td>\n                        <td>{{ formatDuration(dp.duration) }}</td>\n                        <td>{{ formatCost(dp.cost) }}</td>\n                        <td>\n                          <div class=\"tag-cell\">\n                            @for (tag of dp.tags.slice(0, 2); track tag) {\n                              <span class=\"tag-chip-table\">{{ tag }}</span>\n                            }\n                            @if (dp.tags.length > 2) {\n                              <span class=\"tag-more\">+{{ dp.tags.length - 2 }}</span>\n                            }\n                          </div>\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n              @if (getFilteredAnalyticsData().length === 0) {\n                <mj-empty-state\n                  Variant=\"no-results\"\n                  Size=\"compact\"\n                  Title=\"No runs match the current filters.\" />\n              }\n            </div>\n          }\n          <!-- Matrix View -->\n          @if (analyticsView === 'matrix') {\n            <!-- Loading Matrix -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading test matrix...\"></mj-loading>\n              </div>\n            }\n            <!-- Matrix Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"matrix-section\">\n                <div class=\"matrix-header\">\n                  <h3><i class=\"fas fa-th\"></i> Test Results Matrix</h3>\n                  <div class=\"matrix-header-right\">\n                    <div class=\"matrix-filter-input\">\n                      <i class=\"fas fa-search\"></i>\n                      <input type=\"text\"\n                        placeholder=\"Filter tests...\"\n                        [value]=\"matrixTestFilter\"\n                        (input)=\"onMatrixFilterInput($event)\"\n                        class=\"filter-input\">\n                      @if (matrixTestFilter) {\n                        <button class=\"clear-filter-btn\" (click)=\"clearMatrixFilter()\" title=\"Clear filter\">\n                          <i class=\"fas fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                    <span class=\"matrix-run-count\">{{ matrixData.length }} runs \u00B7 {{ getUniqueTestsFromMatrix().length }} tests</span>\n                    <button mjButton (click)=\"exportMatrixToCSV()\" [disabled]=\"matrixData.length === 0\" title=\"Export matrix to CSV\">\n                      <i class=\"fas fa-download\"></i> Export\n                    </button>\n                  </div>\n                </div>\n                <div class=\"matrix-scroll-container\">\n                  <table class=\"test-matrix\">\n                    <thead>\n                      <tr>\n                        <th class=\"seq-header\" (click)=\"toggleMatrixSort('sequence')\" title=\"Sort by sequence\">\n                          #\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'sequence' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        <th class=\"test-name-header\" (click)=\"toggleMatrixSort('name')\" title=\"Sort by name\">\n                          Test\n                          <i class=\"fas\" [ngClass]=\"matrixSortBy === 'name' ? (matrixSortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort'\"></i>\n                        </th>\n                        @for (run of matrixData; track run) {\n                          <th class=\"run-header\" (click)=\"openSuiteRun(run.runId)\" [title]=\"'Click to view suite run - ' + (run.date | date:'medium')\">\n                            <div class=\"run-header-content\">\n                              @if (run.tags.length > 0) {\n                                <div class=\"run-tags-header\">\n                                  @for (tag of run.tags.slice(0, 2); track tag) {\n                                    <span class=\"tag-chip-header\">{{ tag }}</span>\n                                  }\n                                  @if (run.tags.length > 2) {\n                                    <span class=\"tag-more-header\">+{{ run.tags.length - 2 }}</span>\n                                  }\n                                </div>\n                              }\n                              <div class=\"run-date\">{{ getRelativeTime(run.date) }}</div>\n                              <div class=\"run-pass-rate\" [ngClass]=\"{'high': run.passRate >= 80, 'medium': run.passRate >= 50 && run.passRate < 80, 'low': run.passRate < 50}\">\n                                {{ run.passRate.toFixed(0) }}%\n                              </div>\n                            </div>\n                          </th>\n                        }\n                        <th class=\"spacer-header\"></th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (test of getUniqueTestsFromMatrix(); track test) {\n                        <tr\n                          [class.row-selected]=\"selectedMatrixTestId === test.testId\"\n                          (click)=\"selectMatrixRow(test.testId)\">\n                          <td class=\"seq-cell\">{{ test.sequence }}</td>\n                          <td class=\"test-name-cell\">\n                            <span class=\"test-name\" [title]=\"test.testName\">{{ test.testName }}</span>\n                          </td>\n                          @for (run of matrixData; track run) {\n                            <td class=\"result-cell\"\n                              [ngClass]=\"getMatrixCellClass(getTestResultForRun(run.runId, test.testId))\"\n                              [class.clickable]=\"getTestResultForRun(run.runId, test.testId)\"\n                              [class.cell-not-run]=\"!getTestResultForRun(run.runId, test.testId)\"\n                              [title]=\"getTestResultForRun(run.runId, test.testId)?.status + ' - Click to view test run' || 'Not Run'\"\n                              (click)=\"onMatrixCellClick(getTestResultForRun(run.runId, test.testId), $event)\">\n                              @if (getTestResultForRun(run.runId, test.testId); as result) {\n                                <div class=\"cell-eval-stack\">\n                                  <!-- Status indicator -->\n                                  @if (evalPreferences.showExecution) {\n                                    <span class=\"cell-status\"\n                                      [ngClass]=\"'status-' + result.status.toLowerCase()\"\n                                      [class.cell-skipped-status]=\"result.status === 'Skipped' || result.status === 'Pending'\"\n                                      [title]=\"getStatusTooltip(result.status)\">\n                                      <i class=\"fas\"\n                                        [class.fa-check]=\"result.status === 'Passed'\"\n                                        [class.fa-times]=\"result.status === 'Failed'\"\n                                        [class.fa-exclamation]=\"result.status === 'Error'\"\n                                        [class.fa-hourglass-end]=\"result.status === 'Timeout'\"\n                                        [class.fa-forward]=\"result.status === 'Skipped'\"\n                                        [class.fa-spinner]=\"result.status === 'Running'\"\n                                      [class.fa-clock]=\"result.status === 'Pending'\"></i>\n                                    </span>\n                                  }\n                                  <!-- Human score - slashed icon if no feedback, colored by rating if has feedback -->\n                                  @if (evalPreferences.showHuman && !result.humanRating) {\n                                    <span class=\"cell-human no-feedback\"\n                                      title=\"Human Review: No rating submitted yet\">\n                                      <i class=\"fas fa-user-slash\"></i>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showHuman && result.humanRating) {\n                                    <span class=\"cell-human has-feedback\"\n                                      [class.rating-low]=\"result.humanRating <= 4\"\n                                      [class.rating-medium]=\"result.humanRating >= 5 && result.humanRating <= 6\"\n                                      [class.rating-good]=\"result.humanRating >= 7 && result.humanRating <= 8\"\n                                      [class.rating-excellent]=\"result.humanRating >= 9\"\n                                      [title]=\"getHumanTooltip(result.humanRating, result.humanComments)\">\n                                      <i class=\"fas fa-user\"></i>\n                                      <span class=\"rating-value\">{{ result.humanRating }}</span>\n                                    </span>\n                                  }\n                                  <!-- Auto score - colored by percentage -->\n                                  @if (evalPreferences.showAuto && result.score != null) {\n                                    <span class=\"cell-auto has-score\"\n                                      [class.score-low]=\"result.score < 0.5\"\n                                      [class.score-medium]=\"result.score >= 0.5 && result.score < 0.7\"\n                                      [class.score-good]=\"result.score >= 0.7 && result.score < 0.85\"\n                                      [class.score-excellent]=\"result.score >= 0.85\"\n                                      [title]=\"'Auto Score: ' + (result.score * 100).toFixed(0) + '% automated evaluation'\">\n                                      <i class=\"fas fa-robot\"></i>\n                                      <span class=\"score-value\">{{ (result.score * 100).toFixed(0) }}</span>\n                                    </span>\n                                  }\n                                  @if (evalPreferences.showAuto && result.score == null) {\n                                    <span class=\"cell-auto no-score\"\n                                      title=\"Auto Score: No automated score available\">\n                                      <i class=\"fas fa-robot\"></i>\n                                    </span>\n                                  }\n                                </div>\n                              }\n                              @if (!getTestResultForRun(run.runId, test.testId)) {\n                                <span class=\"cell-not-run-indicator\">\n                                  <i class=\"fas fa-minus\"></i>\n                                </span>\n                              }\n                            </td>\n                          }\n                          <td class=\"spacer-cell\"></td>\n                        </tr>\n                      }\n                    </tbody>\n                    <!-- Footer row with totals -->\n                    <tfoot>\n                      <tr class=\"totals-row\">\n                        <td class=\"seq-cell totals-label\"></td>\n                        <td class=\"test-name-cell totals-label\">\n                          <strong>Totals</strong>\n                        </td>\n                        @for (run of matrixData; track run) {\n                          <td class=\"result-cell totals-cell\">\n                            <div class=\"cell-eval-stack totals-stack\">\n                              <!-- Status totals -->\n                              @if (evalPreferences.showExecution) {\n                                <span class=\"totals-status\">\n                                  <span class=\"pass-count\">{{ getRunPassedCount(run) }}/{{ getRunTotalCount(run) }}</span>\n                                </span>\n                              }\n                              <!-- Human totals -->\n                              @if (evalPreferences.showHuman) {\n                                <span class=\"totals-human\">\n                                  @if (getRunHumanAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ getRunHumanAvg(run)?.toFixed(1) }}</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunHumanCount(run) }})</span>\n                                </span>\n                              }\n                              <!-- Auto totals -->\n                              @if (evalPreferences.showAuto) {\n                                <span class=\"totals-auto\">\n                                  @if (getRunAutoAvg(run) != null) {\n                                    <span class=\"avg-label\">{{ (getRunAutoAvg(run)! * 100).toFixed(0) }}%</span>\n                                  }\n                                  <span class=\"count-label\">({{ getRunAutoCount(run) }})</span>\n                                </span>\n                              }\n                            </div>\n                          </td>\n                        }\n                        <td class=\"spacer-cell\"></td>\n                      </tr>\n                    </tfoot>\n                  </table>\n                </div>\n              </div>\n            }\n            <!-- Empty Matrix State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <mj-empty-state\n                Variant=\"no-results\"\n                Icon=\"fa-solid fa-table-cells\"\n                Title=\"No Matrix Data\"\n                Message=\"No suite runs match the current filters.\" />\n            }\n          }\n          <!-- Chart View -->\n          @if (analyticsView === 'chart') {\n            <!-- Loading Chart -->\n            @if (loadingMatrix) {\n              <div class=\"loading-state\">\n                <mj-loading text=\"Loading chart data...\"></mj-loading>\n              </div>\n            }\n            <!-- Chart Content -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length > 0) {\n              <div class=\"chart-section\">\n                <div class=\"chart-header\">\n                  <h3><i class=\"fas fa-project-diagram\"></i> Test Results Flow</h3>\n                  <div class=\"chart-legend\">\n                    <span class=\"legend-item chart-passed\"><i class=\"fas fa-check\"></i> Passed</span>\n                    <span class=\"legend-item chart-failed\"><i class=\"fas fa-times\"></i> Failed</span>\n                    <span class=\"legend-item chart-error\"><i class=\"fas fa-exclamation\"></i> Error</span>\n                    <span class=\"legend-item chart-skipped\"><i class=\"fas fa-forward\"></i> Skipped</span>\n                  </div>\n                </div>\n                <div class=\"chart-container\">\n                  <div #chartContainer class=\"d3-chart\"></div>\n                </div>\n                <div class=\"chart-info\">\n                  <i class=\"fas fa-info-circle\"></i>\n                  Interactive visualization showing test results across {{ matrixData.length }} runs.\n                  Hover over elements for details, click nodes to navigate.\n                </div>\n              </div>\n            }\n            <!-- Empty Chart State -->\n            @if (!loadingMatrix && matrixLoaded && matrixData.length === 0) {\n              <mj-empty-state\n                Variant=\"no-results\"\n                Icon=\"fa-solid fa-diagram-project\"\n                Title=\"No Chart Data\"\n                Message=\"No suite runs match the current filters.\" />\n            }\n          }\n        }\n        <!-- Empty State -->\n        @if (!loadingAnalytics && analyticsLoaded && analyticsData.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-chart-line\"\n            Title=\"No Analytics Data\"\n            Message=\"Run this suite to start collecting analytics data.\"\n            ActionText=\"Run Suite Now\"\n            ActionIcon=\"fa-solid fa-play\"\n            (Action)=\"runSuite()\" />\n        }\n      </div>\n    }\n\n    <!-- Compare Tab -->\n    @if (activeTab === 'compare') {\n      <div class=\"compare-tab\">\n        <!-- Run Selection -->\n        <div class=\"compare-selection\">\n          <div class=\"compare-run-selector\">\n            <h4>Run A (Baseline)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunA(run)\"\n                    (click)=\"selectCompareRunA(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunA) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunA = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunA.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunA).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n          <div class=\"compare-vs\"><i class=\"fas fa-exchange-alt\"></i></div>\n          <div class=\"compare-run-selector\">\n            <h4>Run B (Compare)</h4>\n            @if (!loadingRuns && suiteRuns.length > 0) {\n              <div class=\"run-selector-list\">\n                @for (run of suiteRuns; track run) {\n                  <div class=\"run-selector-item\"\n                    [class.selected]=\"IsCompareRunB(run)\"\n                    [class.disabled]=\"IsCompareRunA(run)\"\n                    (click)=\"!IsCompareRunA(run) && selectCompareRunB(run)\">\n                    <div class=\"selector-status\" [style.background-color]=\"getRunStatusColor(run.Status)\"></div>\n                    <div class=\"selector-content\">\n                      <div class=\"selector-date\">{{ run.StartedAt | date:'short' }}</div>\n                      <div class=\"selector-rate\">{{ getPassRate(run).toFixed(0) }}% pass</div>\n                    </div>\n                    @if (getRunTags(run).length > 0) {\n                      <div class=\"selector-tags\">\n                        @for (tag of getRunTags(run).slice(0, 2); track tag) {\n                          <span class=\"tag-mini\">{{ tag }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (compareRunB) {\n              <div class=\"selected-run-preview\">\n                <div class=\"preview-header\">\n                  <span class=\"preview-label\">Selected:</span>\n                  <button class=\"clear-btn\" (click)=\"compareRunB = null; compareResults = []\">Clear</button>\n                </div>\n                <div class=\"preview-details\">\n                  <span>{{ compareRunB.StartedAt | date:'medium' }}</span>\n                  <span class=\"preview-rate\">{{ getPassRate(compareRunB).toFixed(1) }}%</span>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n        <!-- Comparison Results -->\n        @if (compareRunA && compareRunB && !loadingCompare) {\n          <div class=\"compare-results\">\n            <!-- Summary Cards -->\n            <div class=\"compare-summary\">\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Pass Rate Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getComparePassRateDiff()! > 0, 'negative': getComparePassRateDiff()! < 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-up': getComparePassRateDiff()! > 0, 'fa-arrow-down': getComparePassRateDiff()! < 0, 'fa-minus': getComparePassRateDiff() === 0}\"></i>\n                  {{ getComparePassRateDiff()! > 0 ? '+' : '' }}{{ getComparePassRateDiff()?.toFixed(1) }}%\n                </div>\n              </div>\n              <div class=\"compare-summary-card\">\n                <div class=\"summary-label\">Duration Change</div>\n                <div class=\"summary-value\" [ngClass]=\"{'positive': getCompareDurationDiff()! < 0, 'negative': getCompareDurationDiff()! > 0}\">\n                  <i class=\"fas\" [ngClass]=\"{'fa-arrow-down': getCompareDurationDiff()! < 0, 'fa-arrow-up': getCompareDurationDiff()! > 0, 'fa-minus': getCompareDurationDiff() === 0}\"></i>\n                  {{ formatDuration(getAbsCompareDurationDiff()) }}\n                </div>\n              </div>\n              <div class=\"compare-summary-card improved\">\n                <div class=\"summary-label\">Improved</div>\n                <div class=\"summary-value\">{{ getCompareImprovedCount() }}</div>\n              </div>\n              <div class=\"compare-summary-card regressed\">\n                <div class=\"summary-label\">Regressed</div>\n                <div class=\"summary-value\">{{ getCompareRegressedCount() }}</div>\n              </div>\n            </div>\n            <!-- Detailed Comparison Table -->\n            <div class=\"compare-table-section\">\n              <h3><i class=\"fas fa-list\"></i> Test-by-Test Comparison</h3>\n              <div class=\"compare-table-wrapper\">\n                <table class=\"compare-table\">\n                  <thead>\n                    <tr>\n                      <th>Test</th>\n                      <th>Run A Status</th>\n                      <th>Run B Status</th>\n                      <th>Score Diff</th>\n                      <th>Duration Diff</th>\n                      <th>Change</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (result of compareResults; track result) {\n                      <tr [ngClass]=\"{'improved': result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed', 'regressed': result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed'}\">\n                        <td class=\"test-name-cell\">{{ result.testName }}</td>\n                        <td>\n                          @if (result.runA) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runA.status.toLowerCase()\">{{ result.runA.status }}</span>\n                          }\n                          @if (!result.runA) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runB) {\n                            <span class=\"status-chip\" [ngClass]=\"'status-' + result.runB.status.toLowerCase()\">{{ result.runB.status }}</span>\n                          }\n                          @if (!result.runB) {\n                            <span class=\"status-chip status-missing\">N/A</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.scoreDiff != null) {\n                            <span [ngClass]=\"{'positive': result.scoreDiff > 0, 'negative': result.scoreDiff < 0}\">\n                              {{ result.scoreDiff > 0 ? '+' : '' }}{{ (result.scoreDiff * 100).toFixed(1) }}%\n                            </span>\n                          }\n                          @if (result.scoreDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.durationDiff != null) {\n                            <span [ngClass]=\"{'positive': result.durationDiff < 0, 'negative': result.durationDiff > 0}\">\n                              {{ result.durationDiff > 0 ? '+' : '' }}{{ result.durationDiff.toFixed(1) }}s\n                            </span>\n                          }\n                          @if (result.durationDiff == null) {\n                            <span class=\"muted\">-</span>\n                          }\n                        </td>\n                        <td>\n                          @if (result.runA && result.runB && result.runA.status !== 'Passed' && result.runB.status === 'Passed') {\n                            <span class=\"change-indicator improved\">\n                              <i class=\"fas fa-arrow-up\"></i> Fixed\n                            </span>\n                          }\n                          @if (result.runA && result.runB && result.runA.status === 'Passed' && result.runB.status !== 'Passed') {\n                            <span class=\"change-indicator regressed\">\n                              <i class=\"fas fa-arrow-down\"></i> Broke\n                            </span>\n                          }\n                          @if (!result.statusChanged) {\n                            <span class=\"change-indicator unchanged\">\n                              <i class=\"fas fa-minus\"></i>\n                            </span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          </div>\n        }\n        <!-- Loading State for Compare -->\n        @if (loadingCompare) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading comparison data...\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!compareRunA || !compareRunB) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-scale-balanced\"\n            Title=\"Select Two Runs to Compare\"\n            Message=\"Choose a baseline run (A) and a comparison run (B) from the lists above to see a detailed side-by-side comparison.\" />\n        }\n        <!-- No Runs State -->\n        @if (runsLoaded && suiteRuns.length < 2) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-scale-balanced\"\n            Title=\"Not Enough Runs to Compare\"\n            Message=\"You need at least 2 suite runs to use the comparison feature.\"\n            ActionText=\"Run Suite Now\"\n            ActionIcon=\"fa-solid fa-play\"\n            (Action)=\"runSuite()\" />\n        }\n      </div>\n    }\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  @if (showShortcuts) {\n    <div class=\"keyboard-shortcuts\">\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>Save changes</span>\n          <span class=\"shortcut-keys\"><kbd>Cmd</kbd><kbd>S</kbd></span>\n        </div>\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 Suite</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  }\n\n  <!-- Slide Panel for Suite Execution -->\n  @if (testingDialogService.IsPanelOpen) {\n    <mj-slide-panel\n      Mode=\"slide\"\n      [Title]=\"testingDialogService.PanelOptions?.suiteId ? 'Suite Execution' : 'Run Suite'\"\n      [Resizable]=\"true\"\n      (Closed)=\"OnPanelClosed()\">\n      <app-test-run-dialog\n        [PanelMode]=\"true\"\n        [selectedTestId]=\"testingDialogService.PanelOptions?.testId ?? null\"\n        [selectedSuiteId]=\"testingDialogService.PanelOptions?.suiteId ?? null\"\n        [runMode]=\"testingDialogService.PanelOptions?.mode ?? 'suite'\"\n        (PanelClose)=\"OnPanelClosed()\">\n      </app-test-run-dialog>\n    </mj-slide-panel>\n  }\n\n  <!-- Add Tests Picker Dialog -->\n  @if (showAddTestsDialog) {\n    <div class=\"picker-backdrop\" (click)=\"closeAddTestsDialog()\"></div>\n    <div class=\"picker-dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"add-tests-dialog-title\" (click)=\"$event.stopPropagation()\">\n      <div class=\"picker-header\">\n        <h2 id=\"add-tests-dialog-title\" class=\"picker-title\">\n          <i class=\"fas fa-plus-circle\"></i> Add tests to suite\n        </h2>\n        <button type=\"button\" class=\"picker-close\" (click)=\"closeAddTestsDialog()\" [disabled]=\"isAddingTests\" aria-label=\"Close\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n\n      <div class=\"picker-search\">\n        <i class=\"fas fa-search picker-search-icon\"></i>\n        <input\n          #pickerSearch\n          type=\"text\"\n          class=\"picker-search-input\"\n          placeholder=\"Search tests by name, description, or type...\"\n          [(ngModel)]=\"addTestsSearch\"\n          autofocus\n        />\n        @if (addTestsSearch) {\n          <button type=\"button\" class=\"picker-search-clear\" (click)=\"addTestsSearch = ''\" aria-label=\"Clear search\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        }\n      </div>\n\n      <div class=\"picker-toolbar\">\n        <span class=\"picker-toolbar-status\">\n          @if (selectedTestIdsToAdd.size > 0) {\n            <strong>{{ selectedTestIdsToAdd.size }}</strong> selected\n          } @else if (!loadingAvailableTests) {\n            {{ filteredAvailableTests.length }} test{{ filteredAvailableTests.length === 1 ? '' : 's' }} available\n          }\n        </span>\n        <div class=\"picker-toolbar-actions\">\n          <button type=\"button\" class=\"picker-link-btn\" (click)=\"selectAllFiltered()\" [disabled]=\"loadingAvailableTests || filteredAvailableTests.length === 0\">\n            Select all\n          </button>\n          <button type=\"button\" class=\"picker-link-btn\" (click)=\"clearAddSelection()\" [disabled]=\"selectedTestIdsToAdd.size === 0\">\n            Clear\n          </button>\n        </div>\n      </div>\n\n      <div class=\"picker-body\">\n        @if (loadingAvailableTests) {\n          <div class=\"picker-loading\">\n            <mj-loading text=\"Loading tests...\"></mj-loading>\n          </div>\n        } @else if (filteredAvailableTests.length === 0) {\n          @if (availableTests.length === 0) {\n            <mj-empty-state\n              Variant=\"success\"\n              Size=\"compact\"\n              Title=\"Everything's already in the suite\"\n              Message=\"This suite contains every available test. Create a new test first to add more.\" />\n          } @else {\n            <mj-empty-state\n              Variant=\"no-results\"\n              Size=\"compact\"\n              Title=\"No matches\"\n              [Message]=\"AddTestsNoMatchMessage\" />\n          }\n        } @else {\n          <ul class=\"picker-list\">\n            @for (t of filteredAvailableTests; track t.ID) {\n              <li\n                class=\"picker-row\"\n                [class.picker-row--selected]=\"isAddSelected(t.ID)\"\n                (click)=\"toggleAddSelection(t.ID)\"\n                role=\"checkbox\"\n                [attr.aria-checked]=\"isAddSelected(t.ID)\"\n                tabindex=\"0\"\n              >\n                <span class=\"picker-check\">\n                  @if (isAddSelected(t.ID)) {\n                    <i class=\"fas fa-check\"></i>\n                  }\n                </span>\n                <div class=\"picker-row-main\">\n                  <div class=\"picker-row-name\">{{ t.Name }}</div>\n                  @if (t.Description) {\n                    <div class=\"picker-row-desc\">{{ t.Description }}</div>\n                  }\n                </div>\n                <div class=\"picker-row-meta\">\n                  @if (t.Type) {\n                    <span class=\"picker-row-pill\">{{ t.Type }}</span>\n                  }\n                  <span class=\"picker-row-pill picker-row-pill--status\" [attr.data-status]=\"t.Status?.toLowerCase()\">{{ t.Status }}</span>\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n\n      <div class=\"picker-footer\">\n        <button\n          type=\"button\"\n          class=\"picker-btn picker-btn--primary\"\n          (click)=\"confirmAddTests()\"\n          [disabled]=\"selectedTestIdsToAdd.size === 0 || isAddingTests\"\n        >\n          @if (isAddingTests) {\n            <i class=\"fas fa-spinner fa-spin\"></i> Adding\u2026\n          } @else {\n            <i class=\"fas fa-check\"></i>\n            @if (selectedTestIdsToAdd.size === 0) {\n              Add tests\n            } @else if (selectedTestIdsToAdd.size === 1) {\n              Add 1 test\n            } @else {\n              Add {{ selectedTestIdsToAdd.size }} tests\n            }\n          }\n        </button>\n        <button\n          type=\"button\"\n          class=\"picker-btn picker-btn--ghost\"\n          (click)=\"closeAddTestsDialog()\"\n          [disabled]=\"isAddingTests\"\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Sticky Save Bar \u2014 always in the DOM so CSS transitions can fire reliably.\n       Visibility is controlled by the .save-bar--visible class, driven by isDirty. -->\n  <div\n    class=\"save-bar\"\n    [class.save-bar--visible]=\"isDirty\"\n    [attr.aria-hidden]=\"!isDirty\"\n    role=\"region\"\n    aria-label=\"Unsaved changes\"\n  >\n    <div class=\"save-bar-message\">\n      <span class=\"save-bar-dot\" aria-hidden=\"true\">\u25CF</span>\n      <span class=\"save-bar-text\">\n        <strong>Unsaved changes</strong>\n        <span class=\"save-bar-fields\">\n          @if (dirtyFieldNames.length === 1) {\n            {{ dirtyFieldNames[0] }} edited\n          } @else if (dirtyFieldNames.length > 1) {\n            {{ dirtyFieldNames.length }} fields edited\n          }\n        </span>\n      </span>\n    </div>\n    <div class=\"save-bar-actions\">\n      <button\n        type=\"button\"\n        class=\"save-bar-btn save-bar-btn--primary\"\n        (click)=\"saveChanges()\"\n        [disabled]=\"isSaving || !isDirty\"\n        [attr.tabindex]=\"isDirty ? 0 : -1\"\n        title=\"Save changes (\u2318S)\"\n      >\n        @if (isSaving) {\n          <i class=\"fas fa-spinner fa-spin\"></i> Saving\u2026\n        } @else {\n          <i class=\"fas fa-check\"></i> Save changes\n          <span class=\"save-bar-kbd\"><kbd>\u2318</kbd><kbd>S</kbd></span>\n        }\n      </button>\n      <button\n        type=\"button\"\n        class=\"save-bar-btn save-bar-btn--ghost\"\n        (click)=\"discardChanges()\"\n        [disabled]=\"isSaving || !isDirty\"\n        [attr.tabindex]=\"isDirty ? 0 : -1\"\n        title=\"Discard changes\"\n      >\n        <i class=\"fas fa-undo\"></i> Discard\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["/* ===========================\n   Test Suite Form - World-Class UX\n   =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n  --test-primary: var(--mj-brand-primary);\n  --test-primary-light: var(--mj-brand-primary);\n  --test-success: var(--mj-status-success);\n  --test-error: var(--mj-status-error);\n  --test-warning: var(--mj-status-warning);\n  --test-disabled: var(--mj-text-muted);\n  --test-bg: var(--mj-bg-surface-card);\n  --test-surface: var(--mj-bg-surface);\n  --test-border: var(--mj-border-default);\n  --test-text: var(--mj-text-primary);\n  --test-text-secondary: var(--mj-text-secondary);\n  --test-text-muted: var(--mj-text-disabled);\n  --test-radius-sm: 6px;\n  --test-radius-md: 10px;\n  --test-radius-lg: 16px;\n  --test-shadow-sm: var(--mj-shadow-sm);\n  --test-shadow-md: var(--mj-shadow-md);\n  --test-shadow-lg: var(--mj-shadow-lg);\n  --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: block;\n  height: 100%;\n}\n\n.test-suite-form {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--test-bg);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n  margin-bottom: 16px;\n}\n\n.breadcrumb ol {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n}\n\n.breadcrumb li {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.breadcrumb a {\n  color: var(--test-primary);\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.breadcrumb a:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  text-decoration: none;\n}\n\n.breadcrumb .separator {\n  font-size: 10px;\n  color: var(--test-text-muted);\n  margin: 0 4px;\n}\n\n.breadcrumb .current {\n  color: var(--test-text-secondary);\n  font-weight: 500;\n}\n\n.breadcrumb-text {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header */\n.suite-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.suite-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: var(--mj-text-inverse);\n  font-size: 24px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-md);\n  transition: var(--test-transition);\n}\n\n.suite-icon:hover { transform: scale(1.05); }\n\n.suite-info { flex: 1; min-width: 0; }\n\n.suite-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  word-wrap: break-word;\n}\n\n.suite-meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  color: var(--mj-text-inverse);\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active { background: var(--test-success); }\n.status-badge.status-disabled { background: var(--test-disabled); }\n.status-badge.status-pending { background: var(--test-warning); }\n\n.status-badge-inline {\n  display: inline-flex;\n  padding: 2px 10px;\n  border-radius: 10px;\n  color: var(--mj-text-inverse);\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-count {\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.suite-description {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.suite-description p {\n  margin: 0;\n  color: var(--test-text-secondary);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n/* Tabs */\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  scrollbar-width: none;\n}\n\n.tabs::-webkit-scrollbar { display: none; }\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: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\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-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}\n\n.tab.active .tab-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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}\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  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, .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.info-section h3, .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.info-section h3 i, .config-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  font-weight: 500;\n}\n\n.config-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n}\n\n.config-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\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}\n\n.config-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-hint {\n  font-size: 11px;\n  color: var(--test-text-muted);\n}\n\n/* Tests Tab */\n.tests-tab, .runs-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.loading-state { padding: 0; }\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-sequence {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--test-radius-md);\n  background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\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, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 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.tests-list, .runs-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.test-item, .run-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.test-item:hover, .run-item:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n  border-color: var(--test-primary-light);\n  transform: translateX(4px);\n}\n\n.test-sequence {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--test-bg);\n  border-radius: 50%;\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--test-text-secondary);\n  flex-shrink: 0;\n}\n\n.test-icon, .run-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--test-radius-md);\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n  flex-shrink: 0;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.test-icon {\n  background: var(--test-primary);\n}\n\n.test-content, .run-content { flex: 1; min-width: 0; }\n\n.test-name, .run-header {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  margin-bottom: 4px;\n}\n\n.run-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.run-id { font-weight: 600; }\n\n.run-status {\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.test-status, .run-meta {\n  display: flex;\n  gap: 12px;\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.test-status span, .run-meta span {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.test-item > i, .run-item > i {\n  color: var(--test-text-muted);\n  font-size: 14px;\n  transition: var(--test-transition);\n}\n\n.test-item:hover > i, .run-item:hover > i {\n  color: var(--test-primary);\n  transform: translateX(2px);\n}\n\n/* Keyboard Shortcuts */\n/* Keyboard shortcuts toggle button - visible when shortcuts are hidden */\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  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  color: var(--test-text-secondary);\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-size: 11px;\n  color: var(--test-text);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n  .keyboard-shortcuts, .shortcuts-toggle { display: none; }\n}\n\n@media (max-width: 768px) {\n  .suite-header { padding: 16px; }\n\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-actions {\n    width: 100%;\n    justify-content: stretch;\n  }\n\n  .header-actions button { flex: 1; }\n\n  .tab-shortcut { display: none; }\n\n  .info-grid { grid-template-columns: 1fr; }\n\n  .test-item, .run-item { padding: 14px; }\n}\n\n@media (max-width: 480px) {\n  .suite-icon {\n    width: 40px;\n    height: 40px;\n    font-size: 18px;\n  }\n\n  .suite-info h1 { font-size: 16px; }\n\n  .tab-badge { display: none; }\n\n  .test-sequence { display: none; }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .test-item:active, .run-item:active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    transform: scale(0.98);\n  }\n\n  .tab { min-height: 48px; }\n  .test-item, .run-item { min-height: 64px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@media print {\n  .header-actions, .tabs-container, .keyboard-shortcuts {\n    display: none !important;\n  }\n}\n\n/* ===========================\n   Tags UI\n   =========================== */\n.run-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n\n.tag-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-mini {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 6px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n}\n\n.tag-more {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-weight: 500;\n}\n\n/* Evaluation metrics row for Runs list */\n.run-eval-metrics {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.eval-metric {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.eval-metric.status {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.eval-metric.status.status-completed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.eval-metric.status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.eval-metric.status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.status.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.human .eval-pending {\n  font-size: 9px;\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.eval-metric.auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n  color: var(--mj-status-success);\n}\n\n.eval-metric.auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.eval-metric.auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  color: var(--mj-status-error);\n}\n\n.tag-cell {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.tag-chip-table {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ===========================\n   Analytics Tab\n   =========================== */\n.analytics-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n/* Collapsible filters */\n/* Filters disclosure migrated to <mj-accordion-panel>. The bespoke\n   .analytics-filters wrapper card chrome, the .filters-header bar (+ hover),\n   and the .filters-header > i chevron are now owned by the accordion and were\n   removed. The title-slot layout (.filters-title flex row) and font are now\n   provided by the accordion title + Size=\"sm\"; the collapsed summary uses the\n   shared .mj-accordion-badge (--muted --right). Only the body content\n   (.filters-content) styling is kept below. */\n\n.filters-content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 12px 16px 16px 16px;\n  border-top: 1px solid var(--test-border);\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-group 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.filter-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\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);\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.filter-btn.active {\n  background: var(--test-primary);\n  border-color: var(--test-primary);\n  color: var(--mj-text-inverse);\n}\n\n.filter-btn.tag-btn {\n  padding: 6px 12px;\n  font-size: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.filter-btn.tag-btn i.fa-check {\n  font-size: 10px;\n}\n\n.filter-btn.tag-btn.all-tags-btn {\n  font-weight: 600;\n}\n\n.filter-btn.tag-btn.all-tags-btn i {\n  font-size: 11px;\n}\n\n.filter-hint {\n  font-weight: 400;\n  font-size: 10px;\n  color: var(--test-primary);\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-filters {\n  max-height: 120px;\n  overflow-y: auto;\n}\n\n/* KPI Cards */\n.analytics-kpis {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\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: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-radius: var(--test-radius-md);\n  color: var(--test-primary);\n  font-size: 20px;\n}\n\n.kpi-icon.success {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-icon.info {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.kpi-icon.warning {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.kpi-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.kpi-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  line-height: 1.2;\n}\n\n.kpi-label {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  margin-top: 2px;\n}\n\n.kpi-trend {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-top: 4px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-secondary);\n}\n\n.kpi-trend.trend-up {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.kpi-trend.trend-down {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n/* Analytics Table */\n.analytics-table-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.analytics-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.analytics-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.analytics-table-wrapper {\n  overflow-x: auto;\n  margin: 0 -24px;\n  padding: 0 24px;\n}\n\n.analytics-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.analytics-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.analytics-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.analytics-table tbody tr.clickable-row {\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.analytics-table tbody tr.clickable-row:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.status-chip {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-chip.status-completed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-passed { background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface)); color: var(--test-success); }\n.status-chip.status-failed { background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface)); color: var(--test-error); }\n.status-chip.status-error { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-running { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--test-primary); }\n.status-chip.status-pending { background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.status-chip.status-cancelled { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n.status-chip.status-missing { background: var(--mj-bg-surface-sunken); color: var(--test-text-muted); }\n.status-chip.status-timeout { background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface)); color: var(--test-warning); }\n.status-chip.status-skipped { background: var(--mj-bg-surface-sunken); color: var(--test-disabled); }\n\n.pass-rate-cell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 100px;\n}\n\n.pass-rate-bar {\n  height: 6px;\n  border-radius: 3px;\n  background: var(--test-success);\n  transition: width 0.3s ease;\n  max-width: 60px;\n}\n\n.pass-rate-bar.medium { background: var(--test-warning); }\n.pass-rate-bar.low { background: var(--test-error); }\n\n/* Analytics Sub-navigation */\n.analytics-subnav {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 8px;\n  margin-bottom: 20px;\n  box-shadow: var(--test-shadow-sm);\n  display: inline-flex;\n}\n\n.subnav-tabs {\n  display: flex;\n  gap: 4px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-md);\n  padding: 4px;\n}\n\n.subnav-tab {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: var(--test-radius-sm);\n  background: transparent;\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.subnav-tab:hover {\n  color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.subnav-tab.active {\n  background: var(--test-surface);\n  color: var(--test-primary);\n  box-shadow: var(--test-shadow-sm);\n}\n\n.subnav-tab i {\n  font-size: 14px;\n}\n\n/* Matrix View */\n.matrix-section {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 16px;\n  box-shadow: var(--test-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 280px);\n  min-height: 300px;\n}\n\n.matrix-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 12px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid var(--test-border);\n  flex-shrink: 0;\n}\n\n.matrix-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.matrix-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.matrix-header h3 i {\n  color: var(--test-primary);\n}\n\n.matrix-run-count {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  font-weight: 500;\n}\n\n/* Matrix filter input */\n.matrix-filter-input {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--test-border);\n  border-radius: 6px;\n  padding: 4px 10px;\n  min-width: 180px;\n}\n\n.matrix-filter-input i.fa-search {\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.matrix-filter-input .filter-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 12px;\n  color: var(--test-text);\n  width: 100%;\n}\n\n.matrix-filter-input .filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  border: none;\n  background: none;\n  padding: 2px 4px;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  font-size: 10px;\n  border-radius: 3px;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-text-muted);\n}\n\n/* Scrollable matrix container with fixed height */\n.matrix-scroll-container {\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n}\n\n.test-matrix {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.test-matrix thead {\n  display: table-header-group;\n}\n\n.test-matrix thead tr {\n  display: table-row;\n}\n\n.test-matrix tbody {\n  display: table-row-group;\n}\n\n.test-matrix tbody tr {\n  display: table-row;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.test-matrix tbody tr:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.test-matrix tbody tr.row-selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tbody tr.row-selected td {\n  border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.test-matrix tbody tr.row-selected .seq-cell,\n.test-matrix tbody tr.row-selected .test-name-cell {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent) !important;\n}\n\n.test-matrix tfoot {\n  display: table-footer-group;\n}\n\n.test-matrix th,\n.test-matrix td {\n  display: table-cell;\n  border: 1px solid var(--test-border);\n  padding: 8px 12px;\n  text-align: center;\n  vertical-align: middle;\n}\n\n.test-matrix th {\n  background: var(--test-bg);\n  font-weight: 600;\n  font-size: 11px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 3px solid var(--mj-text-secondary) !important;\n}\n\n/* Sequence column - shared styles */\n.test-matrix .seq-header,\n.test-matrix .seq-cell {\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  text-align: center;\n  position: sticky;\n  left: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  border-right: 1px solid var(--test-border);\n  padding: 6px 4px !important;\n}\n\n/* Seq header - sticky top AND left, highest z-index */\n.test-matrix .seq-header {\n  cursor: pointer;\n  font-weight: 600;\n  background: var(--test-bg);\n  z-index: 12; /* Higher than other headers */\n  top: 0;\n}\n\n/* Seq body cells - sticky left only, lower z-index */\n.test-matrix .seq-cell {\n  background: var(--test-surface);\n  z-index: 2;\n}\n\n.test-matrix .seq-header i {\n  font-size: 9px;\n  margin-left: 2px;\n  opacity: 0.6;\n}\n\n.test-matrix .seq-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .test-name-header {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-bg);\n  z-index: 11;\n  border-right: 2px solid var(--test-border);\n  cursor: pointer;\n}\n\n.test-matrix .test-name-header i {\n  font-size: 9px;\n  margin-left: 4px;\n  opacity: 0.6;\n}\n\n.test-matrix .test-name-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.test-matrix .run-header {\n  min-width: 120px;\n  width: 120px;\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n/* Spacer column absorbs extra width */\n.test-matrix .spacer-header,\n.test-matrix .spacer-cell {\n  width: 100%;\n  min-width: 20px;\n  background: var(--test-bg);\n  border: none;\n}\n\n.test-matrix .spacer-cell {\n  background: var(--test-surface);\n}\n\n.test-matrix .run-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-header-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.run-date {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.run-pass-rate {\n  font-size: 11px;\n  font-weight: 700;\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.run-pass-rate.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.run-pass-rate.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.run-pass-rate.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.run-tags {\n  display: flex;\n  gap: 4px;\n}\n\n.tag-tiny {\n  font-size: 9px;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--test-primary);\n  border-radius: 8px;\n  white-space: nowrap;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Matrix column header tags - emphasized */\n.run-tags-header {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 3px;\n  justify-content: center;\n  margin-bottom: 4px;\n}\n\n.tag-chip-header {\n  display: inline-block;\n  padding: 3px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-brand-primary-hover);\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 600;\n  white-space: nowrap;\n  max-width: 70px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n.tag-more-header {\n  font-size: 9px;\n  color: var(--test-text-secondary);\n  padding: 2px 4px;\n}\n\n.test-matrix .test-name-cell {\n  text-align: left;\n  min-width: 150px;\n  max-width: 500px;\n  width: auto;\n  position: sticky;\n  left: 36px;\n  background: var(--test-surface);\n  z-index: 2;\n  border-right: 2px solid var(--test-border);\n  padding: 6px 10px !important;\n}\n\n.test-name {\n  display: block;\n  white-space: nowrap;\n  font-weight: 500;\n  color: var(--test-text);\n  font-size: 12px;\n}\n\n.result-cell {\n  position: relative;\n  min-width: 120px;\n  width: 120px;\n  transition: var(--test-transition);\n}\n\n.result-cell.clickable {\n  cursor: pointer;\n}\n\n.result-cell.clickable:hover {\n  transform: scale(1.1);\n  box-shadow: var(--mj-shadow-md);\n  z-index: 5;\n}\n\n.result-cell i {\n  font-size: 14px;\n}\n\n/* Completed cells have neutral white background - pills tell the story */\n.result-cell.cell-passed,\n.result-cell.cell-failed,\n.result-cell.cell-error,\n.result-cell.cell-timeout,\n.result-cell.cell-running,\n.result-cell.cell-pending {\n  background: var(--mj-bg-surface);\n  color: var(--test-text);\n}\n\n/* Skipped/not-run cells get hatched background */\n.result-cell.cell-skipped {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--test-disabled);\n}\n\n.result-cell.cell-none {\n  background: var(--mj-bg-surface-card);\n  color: var(--test-text-muted);\n}\n\n.cell-score {\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 2px;\n}\n\n/* Matrix cell evaluation stack - shows multiple eval types horizontally */\n.cell-eval-stack {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-wrap: nowrap;\n}\n\n.result-cell.multi-eval {\n  min-width: 120px;\n  width: auto;\n}\n\n/* Add timeout status icon */\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-status.status-pending {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.cell-auto.high {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-none-indicator {\n  color: var(--test-text-muted);\n  opacity: 0.5;\n}\n\n.matrix-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n}\n\n.matrix-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Chart View\n   =========================== */\n.chart-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.chart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 20px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.chart-header h3 {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n}\n\n.chart-header h3 i {\n  color: var(--test-primary);\n}\n\n.chart-legend {\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.chart-legend .legend-item.chart-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.chart-legend .legend-item.chart-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.chart-legend .legend-item.chart-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--test-warning);\n}\n\n.chart-legend .legend-item.chart-skipped {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-disabled);\n}\n\n.chart-container {\n  min-height: 500px;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-md);\n  border: 1px solid var(--test-border);\n}\n\n.d3-chart {\n  width: 100%;\n  height: 500px;\n}\n\n.d3-chart svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* D3 Chart Node Styles */\n.d3-chart .node {\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.d3-chart .node:hover {\n  transform: scale(1.05);\n}\n\n.d3-chart .node-label {\n  font-size: 11px;\n  font-weight: 500;\n  fill: var(--test-text);\n  pointer-events: none;\n}\n\n.d3-chart .link {\n  fill: none;\n  stroke-opacity: 0.4;\n  transition: stroke-opacity 0.2s ease;\n}\n\n.d3-chart .link:hover {\n  stroke-opacity: 0.8;\n}\n\n.d3-chart .tooltip {\n  position: absolute;\n  padding: 10px 14px;\n  background: var(--mj-bg-overlay);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 12px;\n  pointer-events: none;\n  z-index: 100;\n  box-shadow: var(--mj-shadow-lg);\n  max-width: 250px;\n}\n\n.d3-chart .tooltip-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.d3-chart .tooltip-value {\n  opacity: 0.8;\n}\n\n.chart-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--test-text-muted);\n  padding: 12px;\n  background: var(--test-bg);\n  border-radius: var(--test-radius-sm);\n  margin-top: 16px;\n}\n\n.chart-info i {\n  color: var(--test-primary);\n}\n\n/* ===========================\n   Compare Tab\n   =========================== */\n.compare-tab {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-selection {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  gap: 24px;\n  align-items: flex-start;\n  margin-bottom: 24px;\n}\n\n.compare-run-selector {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n}\n\n.compare-run-selector h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.run-selector-list {\n  max-height: 200px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\n.run-selector-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  cursor: pointer;\n  transition: var(--test-transition);\n}\n\n.run-selector-item:hover {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.run-selector-item.selected {\n  border-color: var(--test-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.run-selector-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selector-status {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.selector-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.selector-date {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--test-text);\n}\n\n.selector-rate {\n  font-size: 11px;\n  color: var(--test-text-secondary);\n}\n\n.selector-tags {\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.selected-run-preview {\n  padding: 12px;\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--test-radius-sm);\n  border: 1px solid var(--test-border);\n}\n\n.preview-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.preview-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n}\n\n.clear-btn {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-error);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.clear-btn:hover { text-decoration: underline; }\n\n.preview-details {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--test-text);\n}\n\n.preview-rate {\n  font-weight: 600;\n  color: var(--test-success);\n}\n\n.compare-vs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--test-bg);\n  border-radius: 50%;\n  color: var(--test-text-muted);\n  font-size: 16px;\n  align-self: center;\n  margin-top: 60px;\n}\n\n/* Compare Results */\n.compare-results {\n  animation: fadeIn 0.3s ease-out;\n}\n\n.compare-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.compare-summary-card {\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  padding: 20px;\n  box-shadow: var(--test-shadow-sm);\n  text-align: center;\n}\n\n.compare-summary-card .summary-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--test-text-muted);\n  margin-bottom: 8px;\n}\n\n.compare-summary-card .summary-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.compare-summary-card .summary-value.positive { color: var(--test-success); }\n.compare-summary-card .summary-value.negative { color: var(--test-error); }\n\n.compare-summary-card.improved {\n  border-left: 4px solid var(--test-success);\n}\n\n.compare-summary-card.improved .summary-value { color: var(--test-success); }\n\n.compare-summary-card.regressed {\n  border-left: 4px solid var(--test-error);\n}\n\n.compare-summary-card.regressed .summary-value { color: var(--test-error); }\n\n/* Compare Table */\n.compare-table-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.compare-table-section h3 {\n  margin: 0 0 16px 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.compare-table-section h3 i {\n  color: var(--test-primary);\n}\n\n.compare-table-wrapper {\n  overflow-x: auto;\n}\n\n.compare-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n.compare-table th {\n  text-align: left;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--test-border);\n  font-weight: 600;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n\n.compare-table td {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--test-border);\n  color: var(--test-text);\n}\n\n.compare-table tbody tr.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.compare-table tbody tr.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 5%, transparent);\n}\n\n.test-name-cell {\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.positive { color: var(--test-success); }\n.negative { color: var(--test-error); }\n.muted { color: var(--test-text-muted); }\n\n.change-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.change-indicator.improved {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--test-success);\n}\n\n.change-indicator.regressed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--test-error);\n}\n\n.change-indicator.unchanged {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--test-text-muted);\n}\n\n/* ===========================\n   Responsive Analytics/Compare\n   =========================== */\n@media (max-width: 1024px) {\n  .compare-selection {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .compare-vs {\n    margin: 0;\n    align-self: center;\n    justify-self: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 768px) {\n  .filter-buttons {\n    flex-direction: column;\n  }\n\n  .filter-btn {\n    width: 100%;\n    text-align: center;\n  }\n\n  .analytics-kpis {\n    grid-template-columns: 1fr;\n  }\n\n  .kpi-card {\n    padding: 16px;\n  }\n\n  .kpi-value {\n    font-size: 20px;\n  }\n\n  .compare-summary {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .analytics-table-wrapper,\n  .compare-table-wrapper {\n    margin: 0 -20px;\n    padding: 0 20px;\n  }\n\n  .run-selector-list {\n    max-height: 150px;\n  }\n}\n\n@media (max-width: 480px) {\n  .compare-summary {\n    grid-template-columns: 1fr;\n  }\n\n  .compare-summary-card .summary-value {\n    font-size: 20px;\n  }\n\n  .analytics-table th,\n  .analytics-table td,\n  .compare-table th,\n  .compare-table td {\n    padding: 10px 12px;\n    font-size: 12px;\n  }\n}\n\n/* ===========================\n   Matrix Evaluation Indicators\n   =========================== */\n\n/* Human Feedback Indicators */\n.cell-human {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-human.no-feedback {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-human.no-feedback i {\n  font-size: 11px;\n}\n\n.cell-human.has-feedback {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-human.has-feedback i {\n  font-size: 9px;\n}\n\n.cell-human.has-feedback .rating-value {\n  font-weight: 700;\n  font-size: 11px;\n}\n\n/* Human rating color coding: red \u22644, yellow 5-6, light-green 7-8, green 9-10 */\n.cell-human.rating-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-human.rating-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-human.rating-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-human.rating-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Auto Score Indicators */\n.cell-auto {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  min-width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 10px;\n}\n\n.cell-auto.no-score {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\n}\n\n.cell-auto.no-score i {\n  font-size: 11px;\n}\n\n.cell-auto.has-score {\n  padding: 0 6px;\n  border-radius: 12px;\n  min-width: 36px;\n}\n\n.cell-auto.has-score i {\n  font-size: 9px;\n}\n\n.cell-auto.has-score .score-value {\n  font-weight: 700;\n  font-size: 10px;\n}\n\n/* Auto score color coding (0-100%): red <50, yellow 50-69, light-green 70-84, green 85+ */\n.cell-auto.score-low {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-auto.score-medium {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-auto.score-good {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-auto.score-excellent {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n/* Status indicators in matrix cells */\n.cell-status {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  font-size: 11px;\n}\n\n.cell-status.status-passed {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.cell-status.status-failed {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.cell-status.status-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-timeout {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.cell-status.status-skipped,\n.cell-status.status-pending {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.cell-status.status-running {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Not-run / Skipped cells with hatch pattern */\n.result-cell.cell-not-run {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--mj-bg-surface-card),\n    var(--mj-bg-surface-card) 4px,\n    var(--mj-border-default) 4px,\n    var(--mj-border-default) 8px\n  );\n  color: var(--mj-text-disabled);\n}\n\n.result-cell.cell-not-run .cell-eval-stack {\n  opacity: 0.6;\n}\n\n.cell-not-run-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  color: var(--mj-text-disabled);\n  font-size: 11px;\n}\n\n/* ===========================\n   Matrix Totals Footer Row\n   =========================== */\n.test-matrix tfoot {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n}\n\n.totals-row {\n  background: var(--mj-bg-surface-sunken);\n  border-top: 2px solid var(--test-border);\n}\n\n.totals-row td {\n  padding: 10px 12px;\n  font-weight: 600;\n}\n\n.totals-row .totals-label {\n  background: var(--mj-bg-surface-sunken);\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.totals-row .totals-cell {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.totals-stack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.totals-status,\n.totals-human,\n.totals-auto {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n\n.totals-status {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.totals-status .pass-count {\n  font-weight: 700;\n}\n\n.totals-human {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.totals-human .avg-label {\n  font-weight: 700;\n}\n\n.totals-human .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n.totals-auto {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.totals-auto .avg-label {\n  font-weight: 700;\n}\n\n.totals-auto .count-label {\n  font-size: 10px;\n  opacity: 0.8;\n}\n\n/* ===========================\n   Editable Overview Form\n   =========================== */\n\n.edit-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.edit-section-header {\n  margin: 0 0 18px 0;\n}\n\n.edit-section-header h3 {\n  margin: 0 0 4px 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.edit-section-header h3 i {\n  color: var(--test-primary);\n}\n\n.edit-section-sub {\n  margin: 0;\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.edit-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n}\n\n@media (max-width: 720px) {\n  .edit-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.edit-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 0;\n}\n\n.edit-field--full {\n  grid-column: 1 / -1;\n}\n\n.edit-field 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.edit-field .required {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.config-textarea {\n  resize: vertical;\n  min-height: 72px;\n  font-family: inherit;\n  line-height: 1.5;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\n.select-wrapper select.config-input {\n  padding-right: 36px;\n  appearance: none;\n  background-color: var(--test-surface);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 14px center;\n  background-size: 10px 7px;\n}\n\n/* Tag editor (chips + inline input) */\n.tag-editor {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  transition: var(--test-transition);\n  cursor: text;\n  min-height: 42px;\n  align-items: center;\n}\n\n.tag-editor:focus-within {\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.tag-chip-editable {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 4px 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.tag-chip-editable .tag-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: 10px;\n  transition: background 0.15s;\n}\n\n.tag-chip-editable .tag-remove:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  color: var(--mj-brand-primary-hover);\n}\n\n.tag-input-inline {\n  flex: 1;\n  min-width: 140px;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 13px;\n  color: var(--test-text);\n  padding: 4px 2px;\n}\n\n.tag-input-inline::placeholder {\n  color: var(--test-text-muted);\n}\n\n/* Read-only metadata section */\n.meta-section {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--test-radius-md);\n  padding: 14px 18px;\n  border: 1px solid var(--test-border);\n}\n\n.meta-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 14px;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.meta-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}\n\n.meta-value {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.meta-mono {\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  font-size: 11px;\n}\n\n/* Dirty indicator next to the title */\n.dirty-indicator {\n  display: inline-block;\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--mj-status-warning);\n  line-height: 1;\n  animation: pulseDot 1.8s ease-in-out infinite;\n  vertical-align: middle;\n}\n\n@keyframes pulseDot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.85); }\n}\n\n.unsaved-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.unsaved-pill i {\n  font-size: 6px;\n  animation: pulseDot 1.8s ease-in-out infinite;\n}\n\n/* Pad the bottom of the tab content when the save bar is visible\n   so the bar doesn't cover the last form field. */\n.tab-content.has-savebar {\n  padding-bottom: 84px;\n}\n\n/* ===========================\n   Sticky Save Bar\n   =========================== */\n\n.save-bar {\n  position: absolute;\n  left: 16px;\n  right: 96px; /* leaves room for the bottom-right chat launcher */\n  bottom: 16px;\n  z-index: 50;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px 12px 20px;\n  background: var(--mj-bg-surface-elevated, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, var(--test-border));\n  border-radius: 14px;\n  box-shadow: 0 12px 32px color-mix(in srgb, var(--mj-status-warning) 10%, rgba(0, 0, 0, 0.18));\n  backdrop-filter: blur(8px);\n  /* Hidden / off-screen state by default. The .save-bar--visible class\n     animates it up into view. Using `transition` (not `animation`)\n     guarantees the change runs every time isDirty toggles. */\n  opacity: 0;\n  transform: translateY(calc(100% + 32px));\n  pointer-events: none;\n  transition:\n    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),\n    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);\n  will-change: transform, opacity;\n}\n\n.save-bar--visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .save-bar {\n    transition: opacity 180ms ease-out;\n    transform: none;\n  }\n  .save-bar--visible {\n    transform: none;\n  }\n}\n\n.save-bar-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.save-bar-dot {\n  color: var(--mj-status-warning);\n  font-size: 12px;\n  line-height: 1;\n  animation: pulseDot 1.8s ease-in-out infinite;\n}\n\n.save-bar-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.save-bar-text strong {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.save-bar-fields {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.save-bar-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.save-bar-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: var(--test-transition);\n  font-family: inherit;\n}\n\n.save-bar-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.save-bar-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.save-bar-btn--primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n\n.save-bar-btn--primary:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.save-bar-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.save-bar-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n  border-color: var(--test-text-muted);\n}\n\n.save-bar-kbd {\n  display: inline-flex;\n  gap: 3px;\n  margin-left: 6px;\n  opacity: 0.85;\n}\n\n.save-bar-kbd kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;\n  background: color-mix(in srgb, white 18%, transparent);\n  border: 1px solid color-mix(in srgb, white 35%, transparent);\n  border-radius: 4px;\n  color: inherit;\n}\n\n@media (max-width: 640px) {\n  .save-bar {\n    left: 8px;\n    right: 8px;\n    bottom: 88px; /* push above the chat launcher on small screens */\n    flex-direction: column;\n    align-items: stretch;\n    padding: 12px;\n  }\n  .save-bar-actions {\n    justify-content: space-between;\n  }\n  .save-bar-kbd {\n    display: none;\n  }\n}\n\n/* ===========================\n   Tests Tab \u2014 Action Bar + Drag/Remove\n   =========================== */\n\n.tests-actionbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  margin-bottom: 16px;\n  background: var(--test-surface);\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-md);\n}\n\n.tests-actionbar-text {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n.tests-actionbar-text strong {\n  font-size: 14px;\n  color: var(--test-text);\n  font-weight: 700;\n}\n\n.tests-actionbar-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 22px;\n  height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.tests-actionbar-hint {\n  font-size: 12px;\n  color: var(--test-text-muted);\n}\n\n.tests-actionbar-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Override the default test-item hover translate so drag transforms don't fight it. */\n.tests-list[cdk-drop-list] .test-item:hover,\n.tests-list .test-item.cdk-drag:hover {\n  transform: none;\n}\n\n/* The whole row is draggable. .test-content keeps the click-to-open behavior. */\n.test-item.cdk-drag {\n  position: relative;\n}\n\n.test-item .test-content {\n  cursor: pointer;\n}\n\n/* Drag handle */\n.test-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 28px;\n  border-radius: 4px;\n  color: var(--test-text-muted);\n  cursor: grab;\n  flex-shrink: 0;\n  transition: background 0.15s, color 0.15s;\n  user-select: none;\n}\n\n.test-drag-handle:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--test-primary);\n}\n\n.test-drag-handle:active,\n.cdk-drag-preview .test-drag-handle {\n  cursor: grabbing;\n}\n\n/* Remove (X) button \u2014 hover-revealed */\n.test-remove-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  opacity: 0;\n  transition: opacity 0.15s, background 0.15s, color 0.15s;\n}\n\n.test-item:hover .test-remove-btn,\n.test-remove-btn:focus-visible {\n  opacity: 1;\n}\n\n.test-remove-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n  color: var(--mj-status-error);\n}\n\n.test-chevron {\n  cursor: pointer;\n}\n\n/* Inline remove-confirm */\n.test-remove-confirm {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px 4px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--test-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  flex-shrink: 0;\n}\n\n.test-remove-confirm-text {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-status-error-text, var(--mj-status-error));\n}\n\n.test-remove-confirm-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid transparent;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.test-remove-confirm-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.test-remove-confirm-btn--danger {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse, white);\n}\n\n.test-remove-confirm-btn--danger:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 88%, black);\n}\n\n.test-remove-confirm-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.test-remove-confirm-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n/* CDK drag-drop visuals */\n.cdk-drag-preview {\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);\n  border-radius: var(--test-radius-md);\n  background: var(--test-surface);\n  opacity: 0.95;\n}\n\n.cdk-drag-placeholder {\n  opacity: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border: 2px dashed var(--test-primary);\n  border-radius: var(--test-radius-md);\n}\n\n.cdk-drag-placeholder * {\n  visibility: hidden;\n}\n\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.tests-list.cdk-drop-list-dragging .test-item:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* ===========================\n   Add Tests Picker Dialog\n   =========================== */\n\n.picker-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  z-index: 200;\n  animation: pickerFadeIn 180ms ease-out;\n  backdrop-filter: blur(2px);\n}\n\n@keyframes pickerFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.picker-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: min(720px, calc(100vw - 32px));\n  max-height: min(80vh, 720px);\n  z-index: 201;\n  display: flex;\n  flex-direction: column;\n  background: var(--test-surface);\n  border-radius: var(--test-radius-lg);\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);\n  animation: pickerSlideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  overflow: hidden;\n}\n\n@keyframes pickerSlideUp {\n  from {\n    opacity: 0;\n    transform: translate(-50%, calc(-50% + 16px));\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%);\n  }\n}\n\n.picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 18px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--test-text);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.picker-title i {\n  color: var(--test-primary);\n}\n\n.picker-close {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 14px;\n  transition: background 0.15s, color 0.15s;\n}\n\n.picker-close:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-close:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.picker-search {\n  position: relative;\n  padding: 14px 20px 0 20px;\n}\n\n.picker-search-icon {\n  position: absolute;\n  top: 50%;\n  left: 32px;\n  transform: translateY(-30%);\n  color: var(--test-text-muted);\n  font-size: 13px;\n  pointer-events: none;\n}\n\n.picker-search-input {\n  width: 100%;\n  padding: 10px 36px 10px 36px;\n  border: 1px solid var(--test-border);\n  border-radius: var(--test-radius-sm);\n  background: var(--test-surface);\n  font-size: 14px;\n  color: var(--test-text);\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-search-input:focus {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-search-clear {\n  position: absolute;\n  top: 50%;\n  right: 32px;\n  transform: translateY(-30%);\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: var(--test-text-muted);\n  cursor: pointer;\n  font-size: 11px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.picker-search-clear:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n.picker-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--test-border);\n}\n\n.picker-toolbar-status {\n  font-size: 12px;\n  color: var(--test-text-secondary);\n}\n\n.picker-toolbar-status strong {\n  color: var(--mj-brand-primary-hover);\n  font-weight: 700;\n}\n\n.picker-toolbar-actions {\n  display: flex;\n  gap: 14px;\n}\n\n.picker-link-btn {\n  border: none;\n  background: transparent;\n  color: var(--test-primary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  padding: 0;\n  font-family: inherit;\n}\n\n.picker-link-btn:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n.picker-link-btn:disabled {\n  color: var(--test-text-muted);\n  cursor: not-allowed;\n}\n\n.picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  min-height: 200px;\n}\n\n.picker-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n}\n\n.picker-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.picker-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.12s, border-color 0.12s;\n  border: 1px solid transparent;\n}\n\n.picker-row:hover {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n}\n\n.picker-row:focus-visible {\n  outline: none;\n  border-color: var(--test-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.picker-row--selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--test-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.picker-row--selected:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--test-surface));\n}\n\n.picker-check {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n  border: 1.5px solid var(--test-border);\n  background: var(--test-surface);\n  color: var(--mj-text-inverse, white);\n  font-size: 11px;\n  flex-shrink: 0;\n  transition: background 0.12s, border-color 0.12s;\n}\n\n.picker-row--selected .picker-check {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-row-main {\n  flex: 1;\n  min-width: 0;\n}\n\n.picker-row-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--test-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.picker-row-desc {\n  font-size: 12px;\n  color: var(--test-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-top: 2px;\n}\n\n.picker-row-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.picker-row-pill {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-secondary);\n  border: 1px solid var(--test-border);\n}\n\n.picker-row-pill--status[data-status=\"active\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n.picker-row-pill--status[data-status=\"disabled\"] {\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n  color: var(--test-text-muted);\n}\n\n.picker-row-pill--status[data-status=\"pending\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.picker-footer {\n  display: flex;\n  gap: 8px;\n  padding: 14px 20px;\n  border-top: 1px solid var(--test-border);\n  background: var(--mj-bg-surface-sunken, var(--test-bg));\n}\n\n.picker-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-family: inherit;\n  transition: var(--test-transition);\n}\n\n.picker-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.picker-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, white);\n  border-color: var(--mj-brand-primary);\n}\n\n.picker-btn--primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.picker-btn--ghost {\n  background: transparent;\n  color: var(--test-text-secondary);\n  border-color: var(--test-border);\n}\n\n.picker-btn--ghost:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover, var(--mj-bg-surface-card));\n  color: var(--test-text);\n}\n\n@media (max-width: 640px) {\n  .picker-dialog {\n    width: calc(100vw - 16px);\n    max-height: calc(100vh - 32px);\n  }\n  .tests-actionbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .tests-actionbar-actions {\n    justify-content: flex-end;\n  }\n  .test-remove-btn {\n    opacity: 1; /* always visible on touch */\n  }\n}\n\n"] }]
-    }], null, { chartContainer: [{
+    }], null, { ChartContainer: [{
             type: ViewChild,
             args: ['chartContainer']
         }], handleKeyboardShortcut: [{