@memberjunction/ng-dashboards 5.24.0 → 5.26.0

package/dist/AI/components/execution-monitoring.component.d.ts

@@ -1,11 +1,11 @@
 import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { AIInstrumentationService, DashboardKPIs, TrendData, LiveExecution, ChartData, ExecutionDetails } from '../services/ai-instrumentation.service';
 import { DataPointClickEvent } from './charts/time-series-chart.component';
 import { KPICardData } from './widgets/kpi-card.component';
 import { HeatmapData } from './charts/performance-heatmap.component';
 import { ResourceData } from "@memberjunction/core-entities";
-import { BaseResourceComponent, NavigationService } from '@memberjunction/ng-shared';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 export interface DrillDownTab {
     id: string;
@@ -53,9 +53,8 @@ export interface ExecutionMonitoringState {
  */
 export declare class ExecutionMonitoringComponent extends BaseResourceComponent implements OnInit, OnDestroy {
     private instrumentationService;
-    private navigationService;
     private cdr;
-    private destroy$;
+    protected destroy$: Subject<void>;
     private stateChangeSubject$;
     selectedTimeRange: string;
     isLoading: boolean;
@@ -99,7 +98,7 @@ export declare class ExecutionMonitoringComponent extends BaseResourceComponent
         executions: boolean;
     };
     get activeTab(): DrillDownTab | undefined;
-    constructor(instrumentationService: AIInstrumentationService, navigationService: NavigationService, cdr: ChangeDetectorRef);
+    constructor(instrumentationService: AIInstrumentationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private getCurrentState;

package/dist/AI/components/execution-monitoring.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"execution-monitoring.component.d.ts","sourceRoot":"","sources":["../../../src/AI/components/execution-monitoring.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"execution-monitoring.component.d.ts","sourceRoot":"","sources":["../../../src/AI/components/execution-monitoring.component.ts"],"names":[],"mappings":"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"}

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

@@ -12,15 +12,14 @@ import { RegisterClass } from '@memberjunction/global';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/ai-instrumentation.service";
-import * as i2 from "@memberjunction/ng-shared";
-import * as i3 from "@angular/forms";
-import * as i4 from "angular-split";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "./widgets/kpi-card.component";
-import * as i7 from "./charts/time-series-chart.component";
-import * as i8 from "./widgets/live-execution-widget.component";
-import * as i9 from "./charts/performance-heatmap.component";
-import * as i10 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "angular-split";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "./widgets/kpi-card.component";
+import * as i6 from "./charts/time-series-chart.component";
+import * as i7 from "./widgets/live-execution-widget.component";
+import * as i8 from "./charts/performance-heatmap.component";
+import * as i9 from "@angular/common";
 const _c0 = () => [];
 const _forTrack0 = ($index, $item) => $item.title;
 const _forTrack1 = ($index, $item) => $item.id;
@@ -687,7 +686,6 @@ function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf
  */
 let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends BaseResourceComponent {
     instrumentationService;
-    navigationService;
     cdr;
     destroy$ = new Subject();
     stateChangeSubject$ = new Subject();
@@ -733,10 +731,9 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
     get activeTab() {
         return this.drillDownTabs.find(tab => tab.id === this.activeTabId);
     }
-    constructor(instrumentationService, navigationService, cdr) {
+    constructor(instrumentationService, cdr) {
         super();
         this.instrumentationService = instrumentationService;
-        this.navigationService = navigationService;
         this.cdr = cdr;
         // Initialize data streams
         this.kpis$ = this.instrumentationService.kpis$;
@@ -760,6 +757,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
         this.tokenEfficiency$ = this.chartData$.pipe(map(data => data.tokenEfficiency));
     }
     ngOnInit() {
+        super.ngOnInit();
         // Load initial state if provided from resource configuration
         if (this.Data?.Configuration) {
             this.loadUserState(this.Data.Configuration);
@@ -788,6 +786,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
         this.NotifyLoadComplete();
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this.destroy$.next();
         this.destroy$.complete();
         this.stateChangeSubject$.complete();
@@ -1345,7 +1344,7 @@ 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(i1.AIInstrumentationService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function ExecutionMonitoringComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i1.AIInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 81, vars: 43, consts: [[1, "execution-monitoring"], [1, "loading-overlay"], [1, "monitoring-header"], [1, "monitoring-title"], [1, "fa-solid", "fa-chart-line"], [1, "monitoring-controls"], [1, "time-range-control"], [3, "ngModelChange", "change", "ngModel", "disabled"], ["value", "1h"], ["value", "6h"], ["value", "24h"], ["value", "7d"], ["value", "30d"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "kpi-dashboard"], [1, "kpi-grid"], [3, "data", "clickable"], ["direction", "vertical", 1, "dashboard-splitter"], [3, "size"], ["direction", "horizontal"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [1, "dashboard-section", "drill-down-container"], [1, "drill-down-tabs"], [1, "tab-header"], [1, "tab-item", 3, "active"], [1, "tab-content"], [1, "tab-pane", "trends-chart"], [1, "tab-pane", "executions-drill-down"], [1, "tab-pane", "model-detail"], [1, "dashboard-section", "performance-matrix"], ["title", "Agent vs Model Performance", 3, "data", "config"], [1, "dashboard-section", "analysis-panels"], [1, "analysis-panel"], [1, "panel-header", 3, "click"], [1, "panel-title"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "panel-toggle-icon"], [1, "panel-content"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-bolt"], [1, "panel-content", "live-executions-panel"], [1, "execution-modal"], ["text", "Loading dashboard data...", "size", "large"], [3, "click", "data"], [1, "status-metric"], [1, "status-icon", "status-icon--success"], [1, "fa-solid", "fa-check"], [1, "status-info"], [1, "status-label"], [1, "status-value"], [1, "status-subtitle"], [1, "status-icon", "status-icon--warning"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "status-icon", "status-icon--info"], [1, "fa-solid", "fa-clock"], [1, "status-icon", "status-icon--primary"], [1, "tab-item", 3, "click"], [1, "tab-title"], ["title", "Close tab", 1, "tab-close"], ["title", "Close tab", 1, "tab-close", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Execution Trends", 3, "dataPointClick", "timeRangeChange", "data", "config"], [1, "drill-down-header"], [1, "fa-solid", "fa-list"], [1, "drill-down-meta"], [1, "timestamp"], [1, "metric-badge"], [1, "loading-spinner"], [1, "executions-table"], [1, "no-data"], ["text", "Loading execution details...", "size", "small"], [1, "table-header"], [1, "header-cell"], [1, "table-row"], [1, "table-row", 3, "click"], [1, "table-cell"], [1, "type-badge"], [1, "status-badge"], [1, "fa-solid", "fa-inbox"], [1, "fa-solid", "fa-microchip"], [1, "model-details"], ["text", "Loading model details...", "size", "small"], [1, "model-info-grid"], [1, "info-item"], [1, "status-indicator"], [1, "model-description"], [1, "cost-bars"], [1, "cost-bar-item"], [1, "cost-bar-info"], [1, "model-name"], [1, "cost-value"], [1, "cost-bar-container"], [1, "cost-bar"], [1, "token-info"], [1, "efficiency-items"], [1, "efficiency-item"], [1, "efficiency-header"], [1, "efficiency-ratio"], [1, "token-breakdown"], [1, "token-bar"], [1, "token-segment", "token-segment--input"], [1, "token-segment", "token-segment--output"], [1, "token-labels"], [1, "input-label"], [1, "output-label"], [1, "cost-per-token"], [3, "executionClick", "executions"], [1, "execution-modal", 3, "click"], [1, "execution-modal-content", 3, "click"], [1, "execution-modal-header"], [1, "modal-header-actions"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "execution-modal-body"], [1, "execution-details"], [1, "loading-details"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "error-message"], [1, "child-executions"], [1, "child-execution"], [1, "child-info"], [1, "child-name"], [1, "child-type"], [1, "child-status"], [1, "child-metrics"], ["text", "Loading execution details...", "size", "medium"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_1_Template, 2, 0, "div", 1);
@@ -1486,7 +1485,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedExecution ? 80 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitComponent, i4.SplitAreaComponent, i5.LoadingComponent, i6.KPICardComponent, i7.TimeSeriesChartComponent, i8.LiveExecutionWidgetComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .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) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    \n\n    [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n      overflow: hidden;\n      padding: 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n        padding: 5px;\n      }\n\n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitComponent, i3.SplitAreaComponent, i4.LoadingComponent, i5.KPICardComponent, i6.TimeSeriesChartComponent, i7.LiveExecutionWidgetComponent, i8.PerformanceHeatmapComponent, i9.AsyncPipe, i9.TitleCasePipe, i9.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .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) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    \n\n    [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n      overflow: hidden;\n      padding: 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n        padding: 5px;\n      }\n\n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
 };
 ExecutionMonitoringComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIMonitorResource')
@@ -2014,6 +2013,6 @@ export { ExecutionMonitoringComponent };
       }
     </div>
   `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading {\n      overflow: hidden;\n    }\n\n    /* Loading Overlay */\n    .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) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    /* === Dashboard Header - Clean White Style === */\n    .monitoring-header {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control select:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control select:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control select option {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      padding: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    /* Ensure splitter areas take full height */\n    :host ::ng-deep as-split-area > .as-split-area-content {\n      overflow: hidden;\n      padding: 10px;\n    }\n\n    /* Cost Analysis Styles */\n    .cost-chart-container, .efficiency-chart-container, .status-container {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      margin-bottom: 16px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        min-height: 400px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        min-height: 350px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep as-split-area > .as-split-area-content {\n        padding: 5px;\n      }\n\n      .tab-header {\n        overflow-x: auto;\n      }\n      \n      .tab-item {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
-    }], () => [{ type: i1.AIInstrumentationService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
+    }], () => [{ type: i1.AIInstrumentationService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1767 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map