@memberjunction/ng-dashboards 6.2.0-edge.5 → 6.2.0-edge.7

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

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var ActionExecutionMonitoringComponent_1;
 import { Component } from '@angular/core';
 import { CompositeKey, RunView, LogError } from '@memberjunction/core';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
@@ -12,6 +13,7 @@ import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
 import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { ValidateEnumParam, BoundNameList } from '../../shared/agent-tool-validation';
 import { FindByIdOrError, FindByIdOrNameOrError } from '../agent-tool-helpers';
+import { ActionResultColor, ActionResultIcon, ActionSuccessRate, ClassifyActionResultCode, } from '../action-result-code';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-ui-components";
 import * as i2 from "@memberjunction/ng-shared-generic";
@@ -129,6 +131,7 @@ function ActionExecutionMonitoringComponent_Conditional_81_Template(rf, ctx) { i
  * Execution Monitoring Resource - displays action execution logs and metrics
  */
 let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponent extends BaseResourceComponent {
+    static { ActionExecutionMonitoringComponent_1 = this; }
     cdr;
     isLoading = true;
     Executions = [];
@@ -234,21 +237,43 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
     set timeRangeOptions(value) {
         this.TimeRangeOptions = value;
     }
-    ResultOptions = [
+    /**
+     * The visible result filter. `Failed` and `Error` were two separate options that both
+     * matched the stored code literally; they are one option now because they are one OUTCOME —
+     * a run that ended without succeeding — and the codes for it (`RUNTIME_ERROR`, `TIMEOUT`,
+     * `NOT_APPROVED`, legacy `Failed`…) never matched either label anyway. `Error` is still
+     * ACCEPTED as an alias (see {@link RESULT_FILTER_CLASSES}) so an agent or a restored filter
+     * asking for it keeps working.
+     */
+    static RESULT_OPTIONS = [
         { text: 'All Results', value: 'all' },
-        { text: 'Success', value: 'Success' },
-        { text: 'Failed', value: 'Failed' },
-        { text: 'Error', value: 'Error' },
+        { text: 'Successful', value: 'Success' },
+        { text: 'Failed or errored', value: 'Failed' },
         { text: 'Running', value: 'Running' }
     ];
+    /**
+     * A constant list, so it lives on the class rather than on each instance — which also makes
+     * it readable without constructing the component, and therefore testable alongside
+     * {@link RESULT_FILTER_CLASSES}. Those two must agree: every offered value has to select
+     * something.
+     */
+    get ResultOptions() {
+        return ActionExecutionMonitoringComponent_1.RESULT_OPTIONS;
+    }
     /** @deprecated Use {@link ResultOptions}. */
     get resultOptions() {
         return this.ResultOptions;
     }
-    /** @deprecated Use {@link ResultOptions}. */
-    set resultOptions(value) {
-        this.ResultOptions = value;
-    }
+    /**
+     * Which outcome class each accepted filter value selects. `Failed` and `Error` deliberately
+     * map to the same class — see {@link ResultOptions}.
+     */
+    static RESULT_FILTER_CLASSES = {
+        Success: 'success',
+        Failed: 'failure',
+        Error: 'failure',
+        Running: 'running',
+    };
     ActionOptions = [
         { text: 'All Actions', value: 'all' }
     ];
@@ -392,7 +417,7 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
             },
             {
                 Name: 'FilterExecutionsByResult',
-                Description: 'Filter executions by result. Allowed: all, Success, Failed, Error, Running.',
+                Description: 'Filter executions by result outcome, not by literal result code. Allowed: all, Success, Failed, Error (an alias for Failed), Running.',
                 ParameterSchema: { type: 'object', properties: { result: { type: 'string', enum: [...this.resultFilterValues] } }, required: ['result'] },
                 Handler: async (params) => {
                     const v = ValidateEnumParam(params['result'], this.resultFilterValues, 'result');
@@ -578,12 +603,16 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
         const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
         this.Metrics = {
             totalExecutions: this.Executions.length,
-            successfulExecutions: this.Executions.filter(e => e.ResultCode === 'Success').length,
-            failedExecutions: this.Executions.filter(e => e.ResultCode && ['Failed', 'Error'].includes(e.ResultCode)).length,
+            // Classified, not string-compared. The writer emits UPPER_SNAKE (`SUCCESS`,
+            // `RUNTIME_ERROR`, …) while these comparisons looked for Title Case, so a database of
+            // successful runs reported 0 successes and 0 failures — beside rows that rendered
+            // green, because the colour helpers lowercased and these did not.
+            successfulExecutions: this.Executions.filter(e => ClassifyActionResultCode(e.ResultCode) === 'success').length,
+            failedExecutions: this.Executions.filter(e => ClassifyActionResultCode(e.ResultCode) === 'failure').length,
             averageDuration: this.calculateAverageDuration(),
             executionsToday: this.Executions.filter(e => new Date(e.StartedAt) >= today).length,
             executionsThisWeek: this.Executions.filter(e => new Date(e.StartedAt) >= weekAgo).length,
-            currentlyRunning: this.Executions.filter(e => e.ResultCode === 'Running' || !e.EndedAt).length
+            currentlyRunning: this.Executions.filter(e => ClassifyActionResultCode(e.ResultCode) === 'running' || !e.EndedAt).length
         };
     }
     calculateAverageDuration() {
@@ -621,10 +650,11 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
             const trend = trends.get(date);
             if (trend) {
                 trend.total++;
-                if (execution.ResultCode === 'Success') {
+                const klass = ClassifyActionResultCode(execution.ResultCode);
+                if (klass === 'success') {
                     trend.successful++;
                 }
-                else if (execution.ResultCode && ['Failed', 'Error'].includes(execution.ResultCode)) {
+                else if (klass === 'failure') {
                     trend.failed++;
                 }
             }
@@ -642,11 +672,15 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
         // Apply result filter
         const result = this.SelectedResult$.value;
         if (result !== 'all') {
-            if (result === 'Running') {
-                filtered = filtered.filter(e => !e.EndedAt || e.ResultCode === 'Running');
+            const wanted = ActionExecutionMonitoringComponent_1.RESULT_FILTER_CLASSES[result];
+            if (wanted === 'running') {
+                filtered = filtered.filter(e => !e.EndedAt || ClassifyActionResultCode(e.ResultCode) === 'running');
             }
-            else {
-                filtered = filtered.filter(e => e.ResultCode === result);
+            else if (wanted) {
+                // Compared by CLASS, not by literal equality. The old `e.ResultCode === result`
+                // matched the chip label against the stored code, so every chip returned an empty
+                // list on a database written by the Runtime executor.
+                filtered = filtered.filter(e => ClassifyActionResultCode(e.ResultCode) === wanted);
             }
         }
         // Apply action filter
@@ -724,7 +758,9 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
                 type: 'dropdown',
                 label: 'Result',
                 icon: 'fa-solid fa-circle-info',
-                options: this.ResultOptions
+                // Copied because FilterFieldConfig.options is a mutable array and the source list is
+                // a shared constant — the panel must not be able to reorder it for every instance.
+                options: [...this.ResultOptions]
             },
             {
                 key: 'action',
@@ -803,30 +839,14 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
         return this.GetActionName(actionId);
     }
     GetResultColor(resultCode) {
-        if (!resultCode)
-            return 'info';
-        switch (resultCode.toLowerCase()) {
-            case 'success': return 'success';
-            case 'failed':
-            case 'error': return 'error';
-            case 'running': return 'warning';
-            default: return 'info';
-        }
+        return ActionResultColor(resultCode);
     }
     /** @deprecated Use {@link GetResultColor}. */
     getResultColor(resultCode) {
         return this.GetResultColor(resultCode);
     }
     GetResultIcon(resultCode) {
-        if (!resultCode)
-            return 'fa-solid fa-question';
-        switch (resultCode.toLowerCase()) {
-            case 'success': return 'fa-solid fa-check-circle';
-            case 'failed':
-            case 'error': return 'fa-solid fa-exclamation-circle';
-            case 'running': return 'fa-solid fa-spinner fa-spin';
-            default: return 'fa-solid fa-info-circle';
-        }
+        return ActionResultIcon(resultCode);
     }
     /** @deprecated Use {@link GetResultIcon}. */
     getResultIcon(resultCode) {
@@ -849,10 +869,13 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
     getDuration(execution) {
         return this.GetDuration(execution);
     }
+    /**
+     * Successes as a share of SETTLED runs — see {@link ActionSuccessRate}. Dividing by
+     * `totalExecutions` put still-running and unrecognised-code rows in the denominator, which
+     * drags the rate down for reasons that are not failures.
+     */
     GetSuccessRate() {
-        if (this.Metrics.totalExecutions === 0)
-            return 0;
-        return Math.round((this.Metrics.successfulExecutions / this.Metrics.totalExecutions) * 100);
+        return ActionSuccessRate(this.Executions.map(e => e.ResultCode));
     }
     /** @deprecated Use {@link GetSuccessRate}. */
     getSuccessRate() {
@@ -1036,7 +1059,7 @@ let ActionExecutionMonitoringComponent = class ActionExecutionMonitoringComponen
             i0.ɵɵconditional(ctx.isLoading ? 81 : -1);
         } }, dependencies: [i1.MJButtonDirective, i1.MJPageBodyComponent, i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageSearchComponent, i1.MJFilterPopoverComponent, i1.MJFilterPanelComponent, i1.MJRefreshButtonComponent, i1.MJEmptyStateComponent, 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%]   .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}"] });
 };
-ActionExecutionMonitoringComponent = __decorate([
+ActionExecutionMonitoringComponent = ActionExecutionMonitoringComponent_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'ActionsMonitorResource')
 ], ActionExecutionMonitoringComponent);
 export { ActionExecutionMonitoringComponent };
@@ -1044,5 +1067,5 @@ export { ActionExecutionMonitoringComponent };
         type: Component,
         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-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      <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    </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        <mj-empty-state class=\"empty-chart\" Size=\"compact\"\n          Icon=\"fa-solid fa-chart-area\"\n          Title=\"No execution trends available\" />\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        <mj-empty-state Variant=\"no-results\"\n          Title=\"No executions found\"\n          Message=\"Try adjusting your filters or search terms\" />\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 .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(ActionExecutionMonitoringComponent, { className: "ActionExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 50 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExecutionMonitoringComponent, { className: "ActionExecutionMonitoringComponent", filePath: "src/Actions/components/execution-monitoring.component.ts", lineNumber: 57 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map