@memberjunction/ng-dashboards 5.34.1 → 5.36.0

package/dist/Actions/components/execution-monitoring.component.js

@@ -11,21 +11,20 @@ import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
 import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-ui-components";
-import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "@angular/common";
+import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.date;
 const _forTrack1 = ($index, $item) => $item.ID;
-function ExecutionMonitoringComponent_Conditional_77_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 48);
-    i0.ɵɵelement(2, "div", 49)(3, "div", 50);
+function ActionExecutionMonitoringComponent_Conditional_69_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 43);
+    i0.ɵɵelement(2, "div", 44)(3, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 51);
+    i0.ɵɵelementStart(4, "div", 46);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 52);
+    i0.ɵɵelementStart(7, "div", 47);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -39,17 +38,17 @@ function ExecutionMonitoringComponent_Conditional_77_For_2_Template(rf, ctx) { i
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(trend_r1.total);
 } }
-function ExecutionMonitoringComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_77_For_2_Template, 9, 9, "div", 43, _forTrack0);
+function ActionExecutionMonitoringComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵrepeaterCreate(1, ActionExecutionMonitoringComponent_Conditional_69_For_2_Template, 9, 9, "div", 38, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 44)(4, "div", 45);
-    i0.ɵɵelement(5, "div", 46);
+    i0.ɵɵelementStart(3, "div", 39)(4, "div", 40);
+    i0.ɵɵelement(5, "div", 41);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7, "Successful");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 45);
-    i0.ɵɵelement(9, "div", 47);
+    i0.ɵɵelementStart(8, "div", 40);
+    i0.ɵɵelement(9, "div", 42);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11, "Failed");
     i0.ɵɵelementEnd()()();
@@ -58,40 +57,40 @@ function ExecutionMonitoringComponent_Conditional_77_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.executionTrends);
 } }
-function ExecutionMonitoringComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵelement(1, "i", 33);
+function ActionExecutionMonitoringComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No execution trends available");
     i0.ɵɵelementEnd()();
 } }
-function ExecutionMonitoringComponent_Conditional_87_For_1_Template(rf, ctx) { if (rf & 1) {
+function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_87_For_1_Template_div_click_0_listener() { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openExecution(execution_r4)); });
-    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template_div_click_0_listener() { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openExecution(execution_r4)); });
+    i0.ɵɵelementStart(1, "div", 50);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 56)(4, "div", 57);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_87_For_1_Template_div_click_4_listener($event) { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openAction(execution_r4.ActionID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "div", 51)(4, "div", 52);
+    i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template_div_click_4_listener($event) { const execution_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openAction(execution_r4.ActionID); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 58)(7, "span", 59);
+    i0.ɵɵelementStart(6, "div", 53)(7, "span", 54);
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 60);
+    i0.ɵɵelementStart(10, "span", 55);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 61);
+    i0.ɵɵelementStart(12, "span", 56);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 62)(15, "span", 63);
+    i0.ɵɵelementStart(14, "div", 57)(15, "span", 58);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 64)(18, "button", 65);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_87_For_1_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(19, "i", 66);
+    i0.ɵɵelementStart(17, "div", 59)(18, "button", 60);
+    i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Conditional_79_For_1_Template_button_click_18_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(19, "i", 61);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r4 = ctx.$implicit;
@@ -111,15 +110,15 @@ function ExecutionMonitoringComponent_Conditional_87_For_1_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", execution_r4.ResultCode || "Unknown", " ");
 } }
-function ExecutionMonitoringComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ExecutionMonitoringComponent_Conditional_87_For_1_Template, 20, 11, "div", 53, _forTrack1);
+function ActionExecutionMonitoringComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ActionExecutionMonitoringComponent_Conditional_79_For_1_Template, 20, 11, "div", 48, _forTrack1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(ctx_r1.filteredExecutions);
 } }
-function ExecutionMonitoringComponent_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 67);
+function ActionExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵelementStart(2, "h5");
     i0.ɵɵtext(3, "No executions found");
     i0.ɵɵelementEnd();
@@ -127,9 +126,9 @@ function ExecutionMonitoringComponent_Conditional_88_Template(rf, ctx) { if (rf
     i0.ɵɵtext(5, "Try adjusting your filters or search terms");
     i0.ɵɵelementEnd()();
 } }
-function ExecutionMonitoringComponent_Conditional_89_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵelement(1, "mj-loading", 68);
+function ActionExecutionMonitoringComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "mj-loading", 63);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -138,7 +137,7 @@ function ExecutionMonitoringComponent_Conditional_89_Template(rf, ctx) { if (rf
 /**
  * Execution Monitoring Resource - displays action execution logs and metrics
  */
-let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends BaseResourceComponent {
+let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponent extends BaseResourceComponent {
     cdr;
     isLoading = true;
     executions = [];
@@ -370,6 +369,70 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
     onActionFilterChange(actionId) {
         this.selectedAction$.next(actionId);
     }
+    // ───── Filter-popover plumbing for the [actions] slot ─────
+    get FilterFields() {
+        return [
+            {
+                key: 'timeRange',
+                type: 'dropdown',
+                label: 'Time range',
+                icon: 'fa-solid fa-clock',
+                options: this.timeRangeOptions
+            },
+            {
+                key: 'result',
+                type: 'dropdown',
+                label: 'Result',
+                icon: 'fa-solid fa-circle-info',
+                options: this.resultOptions
+            },
+            {
+                key: 'action',
+                type: 'dropdown',
+                label: 'Action',
+                icon: 'fa-solid fa-bolt',
+                filterable: true,
+                options: this.actionOptions
+            }
+        ];
+    }
+    get FilterValues() {
+        return {
+            timeRange: this.selectedTimeRange$.value,
+            result: this.selectedResult$.value,
+            action: this.selectedAction$.value
+        };
+    }
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedTimeRange$.value !== '7days')
+            n++;
+        if (this.selectedResult$.value !== 'all')
+            n++;
+        if (this.selectedAction$.value !== 'all')
+            n++;
+        return n;
+    }
+    onFilterValuesChange(v) {
+        const next = (v ?? {});
+        if ((next.timeRange ?? '7days') !== this.selectedTimeRange$.value) {
+            this.onTimeRangeChange(next.timeRange ?? '7days');
+        }
+        if ((next.result ?? 'all') !== this.selectedResult$.value) {
+            this.onResultFilterChange(next.result ?? 'all');
+        }
+        if ((next.action ?? 'all') !== this.selectedAction$.value) {
+            this.onActionFilterChange(next.action ?? 'all');
+        }
+    }
+    resetFilters() {
+        if (this.selectedTimeRange$.value !== '7days')
+            this.onTimeRangeChange('7days');
+        if (this.selectedResult$.value !== 'all')
+            this.onResultFilterChange('all');
+        if (this.selectedAction$.value !== 'all')
+            this.onActionFilterChange('all');
+    }
     openExecution(execution) {
         const key = new CompositeKey([{ FieldName: 'ID', Value: execution.ID }]);
         this.navigationService.OpenEntityRecord('MJ: Action Execution Logs', key);
@@ -446,128 +509,114 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
     async GetResourceIconClass(data) {
         return 'fa-solid fa-chart-line';
     }
-    static ɵfac = function ExecutionMonitoringComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 90, vars: 23, consts: [[1, "execution-monitoring"], [1, "monitoring-header"], [1, "header-title"], [1, "fa-solid", "fa-chart-line"], ["mjButton", "", "variant", "primary", 1, "refresh-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "filters-row"], [1, "search-container"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search executions...", 1, "mj-input", 3, "input", "value"], [1, "filter-group"], ["TextField", "text", "ValueField", "value", 3, "ValueChange", "Data", "ValuePrimitive", "ngModel"], [1, "metrics-summary"], [1, "metric-card", "total", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-play-circle"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "metric-detail"], [1, "metric-card", "error", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "metric-card", "duration"], [1, "fa-solid", "fa-clock"], [1, "metric-card", "activity"], [1, "fa-solid", "fa-calendar-day"], [1, "metric-card", "running", "clickable", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "trends-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-area"], [1, "trends-chart"], [1, "empty-chart"], [1, "executions-section"], [1, "fa-solid", "fa-list"], [1, "results-count"], [1, "executions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "trend-bars"], [1, "trend-bar"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "bar-container"], [1, "bar-success"], [1, "bar-failed"], [1, "bar-label"], [1, "bar-total"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-status"], [1, "execution-main"], [1, "execution-action", 3, "click"], [1, "execution-details"], [1, "execution-time"], [1, "execution-user"], [1, "execution-duration"], [1, "execution-result"], [1, "status-chip"], [1, "execution-actions"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "fa-solid", "fa-search"], ["size", "medium", 3, "showText"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
-            i0.ɵɵelement(4, "i", 3);
-            i0.ɵɵtext(5, " Execution Monitoring");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 4);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_6_listener() { return ctx.refreshData(); });
-            i0.ɵɵelement(7, "i", 5);
-            i0.ɵɵtext(8, " Refresh ");
+    static ɵfac = function ActionExecutionMonitoringComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionExecutionMonitoringComponent, selectors: [["mj-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 82, vars: 18, consts: [["Title", "Execution Monitor", "Icon", "fa-solid fa-chart-line", "Subtitle", "Action execution history, latency, and error rates"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "Clicked"], ["toolbar", ""], ["Placeholder", "Search executions...", 3, "ValueChange", "Value"], [1, "execution-monitoring"], [1, "metrics-summary"], [1, "metric-card", "total", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-play-circle"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "metric-detail"], [1, "metric-card", "error", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "metric-card", "duration"], [1, "fa-solid", "fa-clock"], [1, "metric-card", "activity"], [1, "fa-solid", "fa-calendar-day"], [1, "metric-card", "running", "clickable", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "trends-section"], [1, "section-header"], [1, "fa-solid", "fa-chart-area"], [1, "trends-chart"], [1, "empty-chart"], [1, "executions-section"], [1, "fa-solid", "fa-list"], [1, "results-count"], [1, "executions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "trend-bars"], [1, "trend-bar"], [1, "chart-legend"], [1, "legend-item"], [1, "legend-color", "success"], [1, "legend-color", "failed"], [1, "bar-container"], [1, "bar-success"], [1, "bar-failed"], [1, "bar-label"], [1, "bar-total"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-status"], [1, "execution-main"], [1, "execution-action", 3, "click"], [1, "execution-details"], [1, "execution-time"], [1, "execution-user"], [1, "execution-duration"], [1, "execution-result"], [1, "status-chip"], [1, "execution-actions"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "fa-solid", "fa-search"], ["size", "medium", 3, "showText"]], template: function ActionExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "mj-filter-popover", 2);
+            i0.ɵɵlistener("ClearAllRequested", function ActionExecutionMonitoringComponent_Template_mj_filter_popover_ClearAllRequested_3_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementStart(4, "mj-filter-panel", 3);
+            i0.ɵɵlistener("ValuesChange", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_ValuesChange_4_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function ActionExecutionMonitoringComponent_Template_mj_filter_panel_Reset_4_listener() { return ctx.resetFilters(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 6)(10, "div", 7)(11, "div", 8);
-            i0.ɵɵelement(12, "i", 9);
-            i0.ɵɵelementStart(13, "input", 10);
-            i0.ɵɵlistener("input", function ExecutionMonitoringComponent_Template_input_input_13_listener($event) { return ctx.onSearchChange($event.target.value); });
+            i0.ɵɵelementStart(5, "mj-refresh-button", 4);
+            i0.ɵɵlistener("Clicked", function ActionExecutionMonitoringComponent_Template_mj_refresh_button_Clicked_5_listener() { return ctx.refreshData(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 5)(7, "mj-page-search", 6);
+            i0.ɵɵlistener("ValueChange", function ActionExecutionMonitoringComponent_Template_mj_page_search_ValueChange_7_listener($event) { return ctx.onSearchChange($event); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 11)(15, "mj-dropdown", 12);
-            i0.ɵɵlistener("ValueChange", function ExecutionMonitoringComponent_Template_mj_dropdown_ValueChange_15_listener($event) { return ctx.onTimeRangeChange($event); });
+            i0.ɵɵelementStart(8, "mj-page-body")(9, "div", 7)(10, "div", 8)(11, "div", 9);
+            i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_11_listener() { return ctx.onTotalExecutionsClick(); });
+            i0.ɵɵelementStart(12, "div", 10);
+            i0.ɵɵelement(13, "i", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "mj-dropdown", 12);
-            i0.ɵɵlistener("ValueChange", function ExecutionMonitoringComponent_Template_mj_dropdown_ValueChange_16_listener($event) { return ctx.onResultFilterChange($event); });
+            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "mj-dropdown", 12);
-            i0.ɵɵlistener("ValueChange", function ExecutionMonitoringComponent_Template_mj_dropdown_ValueChange_17_listener($event) { return ctx.onActionFilterChange($event); });
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(18, "div", 13)(19, "div", 14);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_19_listener() { return ctx.onTotalExecutionsClick(); });
-            i0.ɵɵelementStart(20, "div", 15);
+            i0.ɵɵelementStart(17, "div", 14);
+            i0.ɵɵtext(18, "Total Executions");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(19, "div", 15);
+            i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_19_listener() { return ctx.onSuccessRateClick(); });
+            i0.ɵɵelementStart(20, "div", 10);
             i0.ɵɵelement(21, "i", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 17)(23, "div", 18);
+            i0.ɵɵelementStart(22, "div", 12)(23, "div", 13);
             i0.ɵɵtext(24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 19);
-            i0.ɵɵtext(26, "Total Executions");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(27, "div", 20);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_27_listener() { return ctx.onSuccessRateClick(); });
-            i0.ɵɵelementStart(28, "div", 15);
-            i0.ɵɵelement(29, "i", 21);
+            i0.ɵɵelementStart(25, "div", 14);
+            i0.ɵɵtext(26, "Success Rate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 17)(31, "div", 18);
-            i0.ɵɵtext(32);
+            i0.ɵɵelementStart(27, "div", 17);
+            i0.ɵɵtext(28);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(29, "div", 18);
+            i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_29_listener() { return ctx.onFailedExecutionsClick(); });
+            i0.ɵɵelementStart(30, "div", 10);
+            i0.ɵɵelement(31, "i", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "div", 19);
-            i0.ɵɵtext(34, "Success Rate");
+            i0.ɵɵelementStart(32, "div", 12)(33, "div", 13);
+            i0.ɵɵtext(34);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "div", 22);
-            i0.ɵɵtext(36);
+            i0.ɵɵelementStart(35, "div", 14);
+            i0.ɵɵtext(36, "Failed Executions");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(37, "div", 23);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_37_listener() { return ctx.onFailedExecutionsClick(); });
-            i0.ɵɵelementStart(38, "div", 15);
-            i0.ɵɵelement(39, "i", 24);
+            i0.ɵɵelementStart(37, "div", 20)(38, "div", 10);
+            i0.ɵɵelement(39, "i", 21);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "div", 17)(41, "div", 18);
+            i0.ɵɵelementStart(40, "div", 12)(41, "div", 13);
             i0.ɵɵtext(42);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "div", 19);
-            i0.ɵɵtext(44, "Failed Executions");
+            i0.ɵɵelementStart(43, "div", 14);
+            i0.ɵɵtext(44, "Avg Duration");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(45, "div", 25)(46, "div", 15);
-            i0.ɵɵelement(47, "i", 26);
+            i0.ɵɵelementStart(45, "div", 22)(46, "div", 10);
+            i0.ɵɵelement(47, "i", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "div", 17)(49, "div", 18);
+            i0.ɵɵelementStart(48, "div", 12)(49, "div", 13);
             i0.ɵɵtext(50);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(51, "div", 19);
-            i0.ɵɵtext(52, "Avg Duration");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(53, "div", 27)(54, "div", 15);
-            i0.ɵɵelement(55, "i", 28);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(56, "div", 17)(57, "div", 18);
-            i0.ɵɵtext(58);
+            i0.ɵɵelementStart(51, "div", 14);
+            i0.ɵɵtext(52, "Today");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(59, "div", 19);
-            i0.ɵɵtext(60, "Today");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(61, "div", 22);
-            i0.ɵɵtext(62);
+            i0.ɵɵelementStart(53, "div", 17);
+            i0.ɵɵtext(54);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(63, "div", 29);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_63_listener() { return ctx.onRunningExecutionsClick(); });
-            i0.ɵɵelementStart(64, "div", 15);
-            i0.ɵɵelement(65, "i", 30);
+            i0.ɵɵelementStart(55, "div", 24);
+            i0.ɵɵlistener("click", function ActionExecutionMonitoringComponent_Template_div_click_55_listener() { return ctx.onRunningExecutionsClick(); });
+            i0.ɵɵelementStart(56, "div", 10);
+            i0.ɵɵelement(57, "i", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(66, "div", 17)(67, "div", 18);
-            i0.ɵɵtext(68);
+            i0.ɵɵelementStart(58, "div", 12)(59, "div", 13);
+            i0.ɵɵtext(60);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(69, "div", 19);
-            i0.ɵɵtext(70, "Currently Running");
+            i0.ɵɵelementStart(61, "div", 14);
+            i0.ɵɵtext(62, "Currently Running");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(71, "div", 31)(72, "div", 32)(73, "h4");
-            i0.ɵɵelement(74, "i", 33);
-            i0.ɵɵtext(75, " 7-Day Execution Trends");
+            i0.ɵɵelementStart(63, "div", 26)(64, "div", 27)(65, "h4");
+            i0.ɵɵelement(66, "i", 28);
+            i0.ɵɵtext(67, " 7-Day Execution Trends");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(76, "div", 34);
-            i0.ɵɵconditionalCreate(77, ExecutionMonitoringComponent_Conditional_77_Template, 12, 0)(78, ExecutionMonitoringComponent_Conditional_78_Template, 4, 0, "div", 35);
+            i0.ɵɵelementStart(68, "div", 29);
+            i0.ɵɵconditionalCreate(69, ActionExecutionMonitoringComponent_Conditional_69_Template, 12, 0)(70, ActionExecutionMonitoringComponent_Conditional_70_Template, 4, 0, "div", 30);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(79, "div", 36)(80, "div", 32)(81, "h4");
-            i0.ɵɵelement(82, "i", 37);
-            i0.ɵɵtext(83, " Recent Executions");
+            i0.ɵɵelementStart(71, "div", 31)(72, "div", 27)(73, "h4");
+            i0.ɵɵelement(74, "i", 32);
+            i0.ɵɵtext(75, " Recent Executions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(84, "div", 38);
-            i0.ɵɵtext(85);
+            i0.ɵɵelementStart(76, "div", 33);
+            i0.ɵɵtext(77);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(86, "div", 39);
-            i0.ɵɵconditionalCreate(87, ExecutionMonitoringComponent_Conditional_87_Template, 2, 0)(88, ExecutionMonitoringComponent_Conditional_88_Template, 6, 0, "div", 40);
+            i0.ɵɵelementStart(78, "div", 34);
+            i0.ɵɵconditionalCreate(79, ActionExecutionMonitoringComponent_Conditional_79_Template, 2, 0)(80, ActionExecutionMonitoringComponent_Conditional_80_Template, 6, 0, "div", 35);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(89, ExecutionMonitoringComponent_Conditional_89_Template, 2, 1, "div", 41);
-            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(81, ActionExecutionMonitoringComponent_Conditional_81_Template, 2, 1, "div", 36);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(13);
-            i0.ɵɵproperty("value", ctx.searchTerm$.value);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("Data", ctx.timeRangeOptions)("ValuePrimitive", true)("ngModel", ctx.selectedTimeRange$.value);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("Data", ctx.resultOptions)("ValuePrimitive", true)("ngModel", ctx.selectedResult$.value);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Data", ctx.actionOptions)("ValuePrimitive", true)("ngModel", ctx.selectedAction$.value);
-            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Value", ctx.searchTerm$.value);
+            i0.ɵɵadvance(9);
             i0.ɵɵtextInterpolate(ctx.metrics.totalExecutions);
             i0.ɵɵadvance(8);
             i0.ɵɵtextInterpolate1("", ctx.getSuccessRate(), "%");
@@ -584,22 +633,22 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵadvance(6);
             i0.ɵɵtextInterpolate(ctx.metrics.currentlyRunning);
             i0.ɵɵadvance(9);
-            i0.ɵɵconditional(ctx.executionTrends.length > 0 ? 77 : 78);
+            i0.ɵɵconditional(ctx.executionTrends.length > 0 ? 69 : 70);
             i0.ɵɵadvance(8);
             i0.ɵɵtextInterpolate1("", ctx.filteredExecutions.length, " executions");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 87 : 88);
+            i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 79 : 80);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 89 : -1);
-        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDropdownComponent, i3.LoadingComponent, i4.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   .refresh-btn[_ngcontent-%COMP%] {\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 200px;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n  transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-detail[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.total[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.success[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.error[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.duration[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.activity[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.running[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: end;\n  gap: 1rem;\n  height: 120px;\n  margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 80px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background: var(--mj-border-default);\n  position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%]   .bar-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%]   .bar-failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-label[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-total[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color.success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color.failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 120px;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n  opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  display: flex;\n  flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1.5rem 1.5rem 0;\n  margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .results-count[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.5rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-check-circle[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-exclamation-circle[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-question[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%] {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-time[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-user[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-duration[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-result[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]:hover   .execution-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 768px) {\n  .execution-monitoring[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.75rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n    font-size: 1.25rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%], \n   .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    min-width: unset;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 0.5rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%] {\n    gap: 0.5rem;\n  }\n}"] });
+            i0.ɵɵconditional(ctx.isLoading ? 81 : -1);
+        } }, dependencies: [i1.MJButtonDirective, i1.MJPageBodyComponent, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageSearchComponent, i1.MJFilterPopoverComponent, i1.MJFilterPanelComponent, i1.MJRefreshButtonComponent, i2.LoadingComponent, i3.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n  transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-label[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-detail[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.total[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.success[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.error[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.duration[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.activity[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card.running[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: end;\n  gap: 1rem;\n  height: 120px;\n  margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 80px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background: var(--mj-border-default);\n  position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%]   .bar-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-container[_ngcontent-%COMP%]   .bar-failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-label[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%]   .trend-bar[_ngcontent-%COMP%]   .bar-total[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color.success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .chart-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-color.failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 120px;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n  opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .empty-chart[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  display: flex;\n  flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1.5rem 1.5rem 0;\n  margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .results-count[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.5rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-check-circle[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-exclamation-circle[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-status[_ngcontent-%COMP%]   i.fa-question[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%] {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-time[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-user[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-main[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-duration[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-result[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]:hover   .execution-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .executions-section[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 768px) {\n  .execution-monitoring[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.75rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .metrics-summary[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n    font-size: 1.25rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%], \n   .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    min-width: unset;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .monitoring-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-group[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 0.5rem;\n  }\n  .execution-monitoring[_ngcontent-%COMP%]   .trends-section[_ngcontent-%COMP%]   .trends-chart[_ngcontent-%COMP%]   .trend-bars[_ngcontent-%COMP%] {\n    gap: 0.5rem;\n  }\n}"] });
 };
-ExecutionMonitoringComponent = __decorate([
+ActionExecutionMonitoringComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'ActionsMonitorResource')
-], ExecutionMonitoringComponent);
-export { ExecutionMonitoringComponent };
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
+], ActionExecutionMonitoringComponent);
+export { ActionExecutionMonitoringComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionExecutionMonitoringComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<div class=\"execution-monitoring\" >\n  <!-- Header with filters -->\n  <div class=\"monitoring-header\">\n    <div class=\"header-title\">\n      <h3><i class=\"fa-solid fa-chart-line\"></i> Execution Monitoring</h3>\n      <button mjButton variant=\"primary\" (click)=\"refreshData()\" class=\"refresh-btn\">\n        <i class=\"fa-solid fa-refresh\"></i> Refresh\n      </button>\n    </div>\n    \n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <div class=\"search-input-wrapper\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <input type=\"text\" class=\"mj-input\"\n            placeholder=\"Search executions...\"\n            [value]=\"searchTerm$.value\"\n            (input)=\"onSearchChange($any($event.target).value)\" />\n        </div>\n      </div>\n\n      <div class=\"filter-group\">\n        <mj-dropdown\n          [Data]=\"timeRangeOptions\"\n          TextField=\"text\"\n          ValueField=\"value\"\n          [ValuePrimitive]=\"true\"\n          [ngModel]=\"selectedTimeRange$.value\"\n          (ValueChange)=\"onTimeRangeChange($any($event))\">\n        </mj-dropdown>\n\n        <mj-dropdown\n          [Data]=\"resultOptions\"\n          TextField=\"text\"\n          ValueField=\"value\"\n          [ValuePrimitive]=\"true\"\n          [ngModel]=\"selectedResult$.value\"\n          (ValueChange)=\"onResultFilterChange($any($event))\">\n        </mj-dropdown>\n\n        <mj-dropdown\n          [Data]=\"actionOptions\"\n          TextField=\"text\"\n          ValueField=\"value\"\n          [ValuePrimitive]=\"true\"\n          [ngModel]=\"selectedAction$.value\"\n          (ValueChange)=\"onActionFilterChange($any($event))\">\n        </mj-dropdown>\n      </div>\n    </div>\n  </div>\n\n  <!-- Metrics Summary -->\n  <div class=\"metrics-summary\">\n    <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n        <div class=\"metric-label\">Success Rate</div>\n        <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-exclamation-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n        <div class=\"metric-label\">Failed Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card duration\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-clock\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n        <div class=\"metric-label\">Avg Duration</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card activity\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-calendar-day\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n        <div class=\"metric-label\">Today</div>\n        <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n        <div class=\"metric-label\">Currently Running</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Execution Trends Chart -->\n  <div class=\"trends-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n    </div>\n    <div class=\"trends-chart\">\n      @if (executionTrends.length > 0) {\n        <div class=\"trend-bars\">\n          @for (trend of executionTrends; track trend.date) {\n            <div class=\"trend-bar\">\n              <div class=\"bar-container\">\n                <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n                <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n              </div>\n              <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n              <div class=\"bar-total\">{{ trend.total }}</div>\n            </div>\n          }\n        </div>\n        <div class=\"chart-legend\">\n          <div class=\"legend-item\">\n            <div class=\"legend-color success\"></div>\n            <span>Successful</span>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-color failed\"></div>\n            <span>Failed</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <p>No execution trends available</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Execution List -->\n  <div class=\"executions-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n      <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n    </div>\n    \n    <div class=\"executions-list\">\n      @if (filteredExecutions.length > 0) {\n        @for (execution of filteredExecutions; track execution.ID) {\n          <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n            <div class=\"execution-status\">\n              <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n            </div>\n            \n            <div class=\"execution-main\">\n              <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n                {{ getActionName(execution.ActionID!) }}\n              </div>\n              <div class=\"execution-details\">\n                <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n                <span class=\"execution-user\">{{ execution.UserID }}</span>\n                <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n              </div>\n            </div>\n            \n            <div class=\"execution-result\">\n              <span class=\"status-chip\" [attr.data-color]=\"getResultColor(execution.ResultCode)\">\n                {{ execution.ResultCode || 'Unknown' }}\n              </span>\n            </div>\n            \n            <div class=\"execution-actions\">\n              <button mjButton\n                variant=\"flat\"\n                (click)=\"$event.stopPropagation()\">\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search\"></i>\n          <h5>No executions found</h5>\n          <p>Try adjusting your filters or search terms</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n    </div>\n  }\n</div>", styles: [".execution-monitoring {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring .monitoring-header .header-title {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .header-title h3 i {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .monitoring-header .header-title .refresh-btn {\n  gap: 0.5rem;\n}\n.execution-monitoring .monitoring-header .filters-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.execution-monitoring .monitoring-header .filters-row .search-container {\n  flex: 1;\n  min-width: 200px;\n}\n.execution-monitoring .monitoring-header .filters-row .filter-group {\n  display: flex;\n  gap: 0.75rem;\n}\n.execution-monitoring .metrics-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n  transition: all 0.2s ease;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable {\n  cursor: pointer;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon i {\n  color: var(--mj-text-inverse);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content {\n  flex: 1;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 0.125rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-detail {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n  background: var(--mj-status-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n  background: var(--mj-status-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n  background: var(--mj-status-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header {\n  margin-bottom: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 i {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars {\n  display: flex;\n  align-items: end;\n  gap: 1rem;\n  height: 120px;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 80px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background: var(--mj-border-default);\n  position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n  background: var(--mj-status-success);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-failed {\n  background: var(--mj-status-error);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-label {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-total {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend {\n  display: flex;\n  justify-content: center;\n  gap: 1.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color {\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.success {\n  background: var(--mj-status-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n  background: var(--mj-status-error);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 120px;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n  opacity: 0.5;\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .executions-section {\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  display: flex;\n  flex-direction: column;\n}\n.execution-monitoring .executions-section .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1.5rem 1.5rem 0;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .executions-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .executions-section .section-header h4 i {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.5rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i {\n  font-size: 1rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-check-circle {\n  color: var(--mj-status-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n  color: var(--mj-status-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n  color: var(--mj-status-warning);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-info-circle, .execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-question {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main {\n  flex: 1;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-time {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-user {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-duration {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-result {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions button {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover .execution-actions button {\n  opacity: 1;\n}\n.execution-monitoring .executions-section .executions-list .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.execution-monitoring .executions-section .executions-list .empty-state h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .empty-state p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 768px) {\n  .execution-monitoring {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.75rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card {\n    padding: 1rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n    font-size: 1.25rem;\n  }\n  .execution-monitoring .monitoring-header .header-title {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  .execution-monitoring .monitoring-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .execution-monitoring .monitoring-header .filters-row .search-container,\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    min-width: unset;\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 0.5rem;\n  }\n  .execution-monitoring .trends-section .trends-chart .trend-bars {\n    gap: 0.5rem;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-execution-monitoring', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Execution Monitor\"\n    Icon=\"fa-solid fa-chart-line\"\n    Subtitle=\"Action execution history, latency, and error rates\">\n    <!-- [meta] intentionally omitted \u2014 chrome slot discipline audit Task B.\n         totalExecutions was a single inventory count duplicated by the\n         body's metrics cards. -->\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"FilterFields\"\n          [Values]=\"FilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n      <mj-refresh-button (Clicked)=\"refreshData()\"></mj-refresh-button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search executions...\"\n        [Value]=\"searchTerm$.value\"\n        (ValueChange)=\"onSearchChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n  <div class=\"execution-monitoring\" >\n\n  <!-- Metrics Summary -->\n  <div class=\"metrics-summary\">\n    <div class=\"metric-card total clickable\" (click)=\"onTotalExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onSuccessRateClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ getSuccessRate() }}%</div>\n        <div class=\"metric-label\">Success Rate</div>\n        <div class=\"metric-detail\">{{ metrics.successfulExecutions }}/{{ metrics.totalExecutions }}</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card error clickable\" (click)=\"onFailedExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-exclamation-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.failedExecutions }}</div>\n        <div class=\"metric-label\">Failed Executions</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card duration\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-clock\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.averageDuration }}s</div>\n        <div class=\"metric-label\">Avg Duration</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card activity\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-calendar-day\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.executionsToday }}</div>\n        <div class=\"metric-label\">Today</div>\n        <div class=\"metric-detail\">{{ metrics.executionsThisWeek }} this week</div>\n      </div>\n    </div>\n\n    <div class=\"metric-card running clickable\" (click)=\"onRunningExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.currentlyRunning }}</div>\n        <div class=\"metric-label\">Currently Running</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Execution Trends Chart -->\n  <div class=\"trends-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-chart-area\"></i> 7-Day Execution Trends</h4>\n    </div>\n    <div class=\"trends-chart\">\n      @if (executionTrends.length > 0) {\n        <div class=\"trend-bars\">\n          @for (trend of executionTrends; track trend.date) {\n            <div class=\"trend-bar\">\n              <div class=\"bar-container\">\n                <div class=\"bar-success\" [style.height.%]=\"trend.total > 0 ? (trend.successful / trend.total) * 100 : 0\"></div>\n                <div class=\"bar-failed\" [style.height.%]=\"trend.total > 0 ? (trend.failed / trend.total) * 100 : 0\"></div>\n              </div>\n              <div class=\"bar-label\">{{ trend.date | date:'MMM d' }}</div>\n              <div class=\"bar-total\">{{ trend.total }}</div>\n            </div>\n          }\n        </div>\n        <div class=\"chart-legend\">\n          <div class=\"legend-item\">\n            <div class=\"legend-color success\"></div>\n            <span>Successful</span>\n          </div>\n          <div class=\"legend-item\">\n            <div class=\"legend-color failed\"></div>\n            <span>Failed</span>\n          </div>\n        </div>\n      } @else {\n        <div class=\"empty-chart\">\n          <i class=\"fa-solid fa-chart-area\"></i>\n          <p>No execution trends available</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Execution List -->\n  <div class=\"executions-section\">\n    <div class=\"section-header\">\n      <h4><i class=\"fa-solid fa-list\"></i> Recent Executions</h4>\n      <div class=\"results-count\">{{ filteredExecutions.length }} executions</div>\n    </div>\n    \n    <div class=\"executions-list\">\n      @if (filteredExecutions.length > 0) {\n        @for (execution of filteredExecutions; track execution.ID) {\n          <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n            <div class=\"execution-status\">\n              <i [class]=\"getResultIcon(execution.ResultCode)\"></i>\n            </div>\n            \n            <div class=\"execution-main\">\n              <div class=\"execution-action\" (click)=\"openAction(execution.ActionID!); $event.stopPropagation()\">\n                {{ getActionName(execution.ActionID!) }}\n              </div>\n              <div class=\"execution-details\">\n                <span class=\"execution-time\">{{ execution.StartedAt | date:'MMM d, HH:mm:ss' }}</span>\n                <span class=\"execution-user\">{{ execution.UserID }}</span>\n                <span class=\"execution-duration\">{{ getDuration(execution) }}</span>\n              </div>\n            </div>\n            \n            <div class=\"execution-result\">\n              <span class=\"status-chip\" [attr.data-color]=\"getResultColor(execution.ResultCode)\">\n                {{ execution.ResultCode || 'Unknown' }}\n              </span>\n            </div>\n            \n            <div class=\"execution-actions\">\n              <button mjButton\n                variant=\"flat\"\n                (click)=\"$event.stopPropagation()\">\n                <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      } @else {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-search\"></i>\n          <h5>No executions found</h5>\n          <p>Try adjusting your filters or search terms</p>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n    </div>\n  }\n</div>\n  </mj-page-body>\n</mj-page-layout>", styles: [".execution-monitoring {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring .metrics-summary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n  transition: all 0.2s ease;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable {\n  cursor: pointer;\n}\n.execution-monitoring .metrics-summary .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 0.5rem;\n  font-size: 1rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-icon i {\n  color: var(--mj-text-inverse);\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content {\n  flex: 1;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n  margin-bottom: 0.25rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 0.125rem;\n}\n.execution-monitoring .metrics-summary .metric-card .metric-content .metric-detail {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .metrics-summary .metric-card.total .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.success .metric-icon {\n  background: var(--mj-status-success);\n}\n.execution-monitoring .metrics-summary .metric-card.error .metric-icon {\n  background: var(--mj-status-error);\n}\n.execution-monitoring .metrics-summary .metric-card.duration .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .metrics-summary .metric-card.activity .metric-icon {\n  background: var(--mj-status-warning);\n}\n.execution-monitoring .metrics-summary .metric-card.running .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header {\n  margin-bottom: 1.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .section-header h4 i {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars {\n  display: flex;\n  align-items: end;\n  gap: 1rem;\n  height: 120px;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-height: 80px;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background: var(--mj-border-default);\n  position: relative;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-success {\n  background: var(--mj-status-success);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-container .bar-failed {\n  background: var(--mj-status-error);\n  width: 100%;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-label {\n  font-size: 0.625rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring .trends-section .trends-chart .trend-bars .trend-bar .bar-total {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend {\n  display: flex;\n  justify-content: center;\n  gap: 1.5rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color {\n  width: 12px;\n  height: 12px;\n  border-radius: 2px;\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.success {\n  background: var(--mj-status-success);\n}\n.execution-monitoring .trends-section .trends-chart .chart-legend .legend-item .legend-color.failed {\n  background: var(--mj-status-error);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 120px;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart i {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n  opacity: 0.5;\n}\n.execution-monitoring .trends-section .trends-chart .empty-chart p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .executions-section {\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.75rem;\n  display: flex;\n  flex-direction: column;\n}\n.execution-monitoring .executions-section .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1.5rem 1.5rem 0;\n  margin-bottom: 1rem;\n}\n.execution-monitoring .executions-section .section-header h4 {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.execution-monitoring .executions-section .section-header h4 i {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .section-header .results-count {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0.5rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i {\n  font-size: 1rem;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-check-circle {\n  color: var(--mj-status-success);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-exclamation-circle {\n  color: var(--mj-status-error);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-spinner {\n  color: var(--mj-status-warning);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-info-circle, .execution-monitoring .executions-section .executions-list .execution-item .execution-status i.fa-question {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main {\n  flex: 1;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: color 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-action:hover {\n  color: var(--mj-brand-primary-hover);\n  text-decoration: underline;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details {\n  display: flex;\n  gap: 1rem;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-time {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-user {\n  color: var(--mj-brand-primary);\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-main .execution-details .execution-duration {\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-result {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions {\n  flex-shrink: 0;\n}\n.execution-monitoring .executions-section .executions-list .execution-item .execution-actions button {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.execution-monitoring .executions-section .executions-list .execution-item:hover .execution-actions button {\n  opacity: 1;\n}\n.execution-monitoring .executions-section .executions-list .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem 2rem;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.execution-monitoring .executions-section .executions-list .empty-state i {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.execution-monitoring .executions-section .executions-list .empty-state h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n}\n.execution-monitoring .executions-section .executions-list .empty-state p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n.execution-monitoring .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 768px) {\n  .execution-monitoring {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .execution-monitoring .metrics-summary {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 0.75rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card {\n    padding: 1rem;\n  }\n  .execution-monitoring .metrics-summary .metric-card .metric-content .metric-value {\n    font-size: 1.25rem;\n  }\n  .execution-monitoring .monitoring-header .header-title {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 1rem;\n  }\n  .execution-monitoring .monitoring-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .execution-monitoring .monitoring-header .filters-row .search-container,\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    min-width: unset;\n  }\n  .execution-monitoring .monitoring-header .filters-row .filter-group {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 0.5rem;\n  }\n  .execution-monitoring .trends-section .trends-chart .trend-bars {\n    gap: 0.5rem;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExecutionMonitoringComponent, { className: "ActionExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 36 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map