@memberjunction/ng-dashboards 2.120.0 → 2.122.0

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

@@ -1,30 +1,38 @@
-import { Component, Output, EventEmitter, Input, ChangeDetectionStrategy } from '@angular/core';
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { map, takeUntil, debounceTime } from 'rxjs/operators';
-import { RunView } from '@memberjunction/core';
+import { RunView, CompositeKey } from '@memberjunction/core';
+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 "@angular/forms";
-import * as i3 from "@progress/kendo-angular-layout";
-import * as i4 from "./widgets/kpi-card.component";
-import * as i5 from "./widgets/live-execution-widget.component";
-import * as i6 from "./charts/time-series-chart.component";
-import * as i7 from "./charts/performance-heatmap.component";
-import * as i8 from "@angular/common";
+import * as i2 from "@memberjunction/ng-shared";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-layout";
+import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i6 from "./widgets/kpi-card.component";
+import * as i7 from "./widgets/live-execution-widget.component";
+import * as i8 from "./charts/time-series-chart.component";
+import * as i9 from "./charts/performance-heatmap.component";
+import * as i10 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.title;
 const _forTrack1 = ($index, $item) => $item.id;
 const _forTrack2 = ($index, $item) => $item.model;
 const _c0 = () => [];
 function ExecutionMonitoringComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 51);
-    i0.ɵɵelement(2, "i", 52);
-    i0.ɵɵelementStart(3, "p");
-    i0.ɵɵtext(4, "Loading dashboard data...");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 51);
+    i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-kpi-card", 53);
+    i0.ɵɵelementStart(0, "app-kpi-card", 52);
     i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_27_Template_app_kpi_card_click_0_listener() { const kpi_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onKpiClick(kpi_r2)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -34,52 +42,52 @@ function ExecutionMonitoringComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("data", kpi_r2);
 } }
 function ExecutionMonitoringComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 54)(2, "div", 55);
-    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 53)(2, "div", 54);
+    i0.ɵɵelement(3, "i", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 57)(5, "div", 58);
+    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
     i0.ɵɵtext(6, "Success Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 59);
+    i0.ɵɵelementStart(7, "div", 58);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 60);
+    i0.ɵɵelementStart(9, "div", 59);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 54)(12, "div", 61);
-    i0.ɵɵelement(13, "i", 62);
+    i0.ɵɵelementStart(11, "div", 53)(12, "div", 60);
+    i0.ɵɵelement(13, "i", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 57)(15, "div", 58);
+    i0.ɵɵelementStart(14, "div", 56)(15, "div", 57);
     i0.ɵɵtext(16, "Error Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 59);
+    i0.ɵɵelementStart(17, "div", 58);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 60);
+    i0.ɵɵelementStart(19, "div", 59);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 54)(22, "div", 63);
-    i0.ɵɵelement(23, "i", 64);
+    i0.ɵɵelementStart(21, "div", 53)(22, "div", 62);
+    i0.ɵɵelement(23, "i", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 57)(25, "div", 58);
+    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
     i0.ɵɵtext(26, "Avg Response Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 59);
+    i0.ɵɵelementStart(27, "div", 58);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 60);
+    i0.ɵɵelementStart(29, "div", 59);
     i0.ɵɵtext(30, "Across all models");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 54)(32, "div", 65);
+    i0.ɵɵelementStart(31, "div", 53)(32, "div", 64);
     i0.ɵɵelement(33, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 57)(35, "div", 58);
+    i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
     i0.ɵɵtext(36, "Active Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 59);
+    i0.ɵɵelementStart(37, "div", 58);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 60);
+    i0.ɵɵelementStart(39, "div", 59);
     i0.ɵɵtext(40, "Currently running");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -100,19 +108,19 @@ function ExecutionMonitoringComponent_Conditional_39_Template(rf, ctx) { if (rf
 } }
 function ExecutionMonitoringComponent_For_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵelementStart(0, "button", 68);
     i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_46_Conditional_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const tab_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeTab($event, tab_r6.id)); });
-    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_For_46_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelementStart(0, "div", 65);
     i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_46_Template_div_click_0_listener() { const tab_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectTab(tab_r6.id)); });
-    i0.ɵɵelementStart(1, "span", 67);
+    i0.ɵɵelementStart(1, "span", 66);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ExecutionMonitoringComponent_For_46_Conditional_3_Template, 2, 0, "button", 68);
+    i0.ɵɵtemplate(3, ExecutionMonitoringComponent_For_46_Conditional_3_Template, 2, 0, "button", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r6 = ctx.$implicit;
@@ -125,7 +133,7 @@ function ExecutionMonitoringComponent_For_46_Template(rf, ctx) { if (rf & 1) {
 } }
 function ExecutionMonitoringComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "app-time-series-chart", 71);
+    i0.ɵɵelementStart(0, "div", 34)(1, "app-time-series-chart", 70);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵlistener("dataPointClick", function ExecutionMonitoringComponent_Conditional_48_Template_app_time_series_chart_dataPointClick_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDataPointClick($event)); })("timeRangeChange", function ExecutionMonitoringComponent_Conditional_48_Template_app_time_series_chart_timeRangeChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onChartTimeRangeChange($event)); });
     i0.ɵɵelementEnd()();
@@ -136,7 +144,7 @@ function ExecutionMonitoringComponent_Conditional_48_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("data", (tmp_1_0 = i0.ɵɵpipeBind1(2, 2, ctx_r2.trends$)) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(4, _c0))("config", ctx_r2.timeSeriesConfig);
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵelementStart(0, "span", 74);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -145,7 +153,7 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedTimestamp(ctx_r2.activeTab));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 76);
+    i0.ɵɵelementStart(0, "span", 75);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -154,37 +162,36 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedMetricLabel(ctx_r2.activeTab));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵelement(1, "i", 80);
-    i0.ɵɵtext(2, " Loading execution details... ");
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "mj-loading", 79);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵelementStart(0, "div", 83);
     i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template_div_click_0_listener() { const execution_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.viewExecutionDetail(execution_r10)); });
-    i0.ɵɵelementStart(1, "div", 85)(2, "span", 86);
+    i0.ɵɵelementStart(1, "div", 84)(2, "span", 85);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 85);
+    i0.ɵɵelementStart(4, "div", 84);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 85);
+    i0.ɵɵelementStart(6, "div", 84);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 85)(9, "span", 87);
+    i0.ɵɵelementStart(8, "div", 84)(9, "span", 86);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 85);
+    i0.ɵɵelementStart(11, "div", 84);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 85);
+    i0.ɵɵelementStart(13, "div", 84);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 85);
+    i0.ɵɵelementStart(15, "div", 84);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 85);
+    i0.ɵɵelementStart(17, "div", 84);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -212,31 +219,31 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Templa
     i0.ɵɵtextInterpolate(ctx_r2.formatTime(execution_r10.startTime));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78)(1, "div", 81)(2, "div", 82);
+    i0.ɵɵelementStart(0, "div", 77)(1, "div", 80)(2, "div", 81);
     i0.ɵɵtext(3, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 82);
+    i0.ɵɵelementStart(4, "div", 81);
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 82);
+    i0.ɵɵelementStart(6, "div", 81);
     i0.ɵɵtext(7, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 82);
+    i0.ɵɵelementStart(8, "div", 81);
     i0.ɵɵtext(9, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 82);
+    i0.ɵɵelementStart(10, "div", 81);
     i0.ɵɵtext(11, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 82);
+    i0.ɵɵelementStart(12, "div", 81);
     i0.ɵɵtext(13, "Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 82);
+    i0.ɵɵelementStart(14, "div", 81);
     i0.ɵɵtext(15, "Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 82);
+    i0.ɵɵelementStart(16, "div", 81);
     i0.ɵɵtext(17, "Time");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template, 19, 12, "div", 83, _forTrack1);
+    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template, 19, 12, "div", 82, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -244,21 +251,21 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template(rf,
     i0.ɵɵrepeater(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data);
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 87);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No executions found for this time period");
     i0.ɵɵelementEnd()();
 } }
 function ExecutionMonitoringComponent_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 72)(2, "h4");
-    i0.ɵɵelement(3, "i", 73);
+    i0.ɵɵelementStart(0, "div", 35)(1, "div", 71)(2, "h4");
+    i0.ɵɵelement(3, "i", 72);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 74);
-    i0.ɵɵtemplate(6, ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template, 2, 1, "span", 75)(7, ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template, 2, 1, "span", 76);
+    i0.ɵɵelementStart(5, "div", 73);
+    i0.ɵɵtemplate(6, ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template, 2, 1, "span", 74)(7, ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template, 2, 1, "span", 75);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template, 3, 0, "div", 77)(9, ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template, 20, 0, "div", 78)(10, ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template, 4, 0, "div", 79);
+    i0.ɵɵtemplate(8, ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template, 2, 0, "div", 76)(9, ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template, 20, 0, "div", 77)(10, ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template, 4, 0, "div", 78);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -272,9 +279,8 @@ function ExecutionMonitoringComponent_Conditional_49_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 8 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.length) > 0 ? 9 : 10);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵelement(1, "i", 80);
-    i0.ɵɵtext(2, " Loading model details... ");
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "mj-loading", 90);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template(rf, ctx) { if (rf & 1) {
@@ -290,7 +296,7 @@ function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_3
     i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 91)(2, "div", 92)(3, "label");
+    i0.ɵɵelementStart(0, "div", 89)(1, "div", 91)(2, "div", 92)(3, "label");
     i0.ɵɵtext(4, "Model Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
@@ -348,11 +354,11 @@ function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template(rf,
     i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description) ? 32 : -1);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 72)(2, "h4");
-    i0.ɵɵelement(3, "i", 89);
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 71)(2, "h4");
+    i0.ɵɵelement(3, "i", 88);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template, 3, 0, "div", 77)(6, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template, 33, 9, "div", 90);
+    i0.ɵɵtemplate(5, ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template, 2, 0, "div", 76)(6, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template, 33, 9, "div", 89);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -577,7 +583,7 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template(rf,
     i0.ɵɵelementStart(16, "div", 128)(17, "label");
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 87);
+    i0.ɵɵelementStart(19, "span", 86);
     i0.ɵɵtext(20);
     i0.ɵɵpipe(21, "titlecase");
     i0.ɵɵelementEnd()();
@@ -643,10 +649,8 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template(rf,
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵelement(1, "div", 137);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "Loading execution details...");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(1, "mj-loading", 137);
+    i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
@@ -664,10 +668,10 @@ function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "button", 122);
     i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_80_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
-    i0.ɵɵelement(10, "i", 70);
+    i0.ɵɵelement(10, "i", 69);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(11, "div", 123);
-    i0.ɵɵtemplate(12, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template, 51, 20, "div", 124)(13, ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template, 4, 0, "div", 125);
+    i0.ɵɵtemplate(12, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template, 51, 20, "div", 124)(13, ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template, 2, 0, "div", 125);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -676,12 +680,20 @@ function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.loadingExecutionDetails ? 13 : -1);
 } }
-export class ExecutionMonitoringComponent {
+/**
+ * Tree-shaking prevention function - ensures component is included in builds
+ */
+export function LoadAIMonitorResource() {
+    // Force inclusion in production builds
+}
+/**
+ * AI Monitor Resource - displays AI execution monitoring and analytics
+ * Extends BaseResourceComponent to work with the resource type system
+ */
+let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends BaseResourceComponent {
     instrumentationService;
+    navigationService;
     cdr;
-    initialState;
-    openEntityRecord = new EventEmitter();
-    stateChange = new EventEmitter();
     destroy$ = new Subject();
     stateChangeSubject$ = new Subject();
     // Configuration
@@ -726,8 +738,10 @@ export class ExecutionMonitoringComponent {
     get activeTab() {
         return this.drillDownTabs.find(tab => tab.id === this.activeTabId);
     }
-    constructor(instrumentationService, cdr) {
+    constructor(instrumentationService, navigationService, cdr) {
+        super();
         this.instrumentationService = instrumentationService;
+        this.navigationService = navigationService;
         this.cdr = cdr;
         // Initialize data streams
         this.kpis$ = this.instrumentationService.kpis$;
@@ -751,9 +765,9 @@ export class ExecutionMonitoringComponent {
         this.tokenEfficiency$ = this.chartData$.pipe(map(data => data.tokenEfficiency));
     }
     ngOnInit() {
-        // Load initial state if provided
-        if (this.initialState) {
-            this.loadUserState(this.initialState);
+        // Load initial state if provided from resource configuration
+        if (this.Data?.Configuration) {
+            this.loadUserState(this.Data.Configuration);
         }
         else {
             // Default initialization
@@ -770,11 +784,13 @@ export class ExecutionMonitoringComponent {
             // Trigger initial data load
             this.instrumentationService.refresh();
         }
-        // Set up debounced state change emission
+        // Set up debounced state change - could be used for persistence in the future
         this.stateChangeSubject$.pipe(debounceTime(2000), // 2 second debounce
-        takeUntil(this.destroy$)).subscribe(state => {
-            this.stateChange.emit(state);
+        takeUntil(this.destroy$)).subscribe(_state => {
+            // State change handling placeholder
         });
+        // Notify that the resource has finished loading
+        this.NotifyLoadComplete();
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -995,11 +1011,9 @@ export class ExecutionMonitoringComponent {
             const entityName = this.selectedExecution.type === 'prompt'
                 ? 'MJ: AI Prompt Runs'
                 : 'MJ: AI Agent Runs';
-            // Emit the event to open the full record
-            this.openEntityRecord.emit({
-                entityName: entityName,
-                recordId: this.selectedExecution.id
-            });
+            // Open the record using NavigationService
+            const compositeKey = new CompositeKey([{ FieldName: 'ID', Value: this.selectedExecution.id }]);
+            this.navigationService.OpenEntityRecord(entityName, compositeKey);
             // Close the modal
             this.closeExecutionModal();
         }
@@ -1323,10 +1337,23 @@ export class ExecutionMonitoringComponent {
         // Emit state change when splitter changes
         this.emitStateChange();
     }
-    static ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i1.AIInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 81, vars: 50, 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"], ["orientation", "vertical", 1, "dashboard-splitter", 3, "layoutChange"], ["size", "45%", 3, "resizable", "collapsible"], ["orientation", "horizontal", 3, "layoutChange"], ["size", "30%", 3, "resizable", "collapsible", "collapsed"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [3, "resizable", "collapsible"], [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"], ["size", "50%", 3, "resizable", "collapsible"], [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"], [1, "loading-content"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-3x"], [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"], [1, "fa-solid", "fa-spinner", "fa-spin"], [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"], [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"], [1, "spinner"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
+    // === BaseResourceComponent Required Methods ===
+    /**
+     * Get the display name for this resource
+     */
+    async GetResourceDisplayName(data) {
+        return 'Monitor';
+    }
+    /**
+     * Get the icon class for this resource
+     */
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-chart-line';
+    }
+    static ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i1.AIInstrumentationService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 81, vars: 50, 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"], ["orientation", "vertical", 1, "dashboard-splitter", 3, "layoutChange"], ["size", "45%", 3, "resizable", "collapsible"], ["orientation", "horizontal", 3, "layoutChange"], ["size", "30%", 3, "resizable", "collapsible", "collapsed"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [3, "resizable", "collapsible"], [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"], ["size", "50%", 3, "resizable", "collapsible"], [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.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_1_Template, 5, 0, "div", 1);
+            i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_1_Template, 2, 0, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "h2", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " AI Execution Monitoring ");
@@ -1469,8 +1496,12 @@ export class ExecutionMonitoringComponent {
             i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedExecution ? 80 : -1);
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitterComponent, i3.SplitterPaneComponent, i4.KPICardComponent, i5.LiveExecutionWidgetComponent, i6.TimeSeriesChartComponent, i7.PerformanceHeatmapComponent, i8.AsyncPipe, i8.TitleCasePipe, i8.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\n      min-height: 100vh;\n      position: relative;\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: rgba(255, 255, 255, 0.5);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(1px);\n    }\n    \n    .loading-content[_ngcontent-%COMP%] {\n      text-align: center;\n      padding: 40px;\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n    }\n    \n    .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n      margin-bottom: 20px;\n      display: block;\n    }\n    \n    .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\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: 12px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    \n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #f5f5f5;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #e0e0e0;\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      margin-bottom: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      height: calc(100vh - 550px); \n\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \n\n    [_nghost-%COMP%]     .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 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: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\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 #f0f0f0;\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: #333;\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #666;\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 #f0f0f0;\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: #2196f3;\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: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: #2196f3;\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\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: #f8f9fa;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\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: white;\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 #f0f0f0;\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: #333;\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: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\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: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: #333;\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: #333;\n      border-bottom: 1px solid #f0f0f0;\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: #666;\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: #333;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\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: #f8f9fa;\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: #333;\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\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: #666;\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    .spinner[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border: 3px solid #f3f3f3;\n      border-top: 3px solid #2196f3;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\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 #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\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: #999;\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: #333;\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 #e0e0e0;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\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: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\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: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\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 #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: #ddd;\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: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\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: #333;\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: #4caf50;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\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: #333;\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\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: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\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        height: calc(100vh - 270px); \n\n        margin-bottom: 20px;\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        height: calc(100vh - 270px); \n\n        min-height: 400px;\n        margin-bottom: 20px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 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: #666;\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: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.LiveExecutionWidgetComponent, i8.TimeSeriesChartComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: #f8f9fa;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\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: rgba(255, 255, 255, 0.5);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(1px);\n    }\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\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: 12px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    \n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #f5f5f5;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #e0e0e0;\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      margin-bottom: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      height: calc(100vh - 550px); \n\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \n\n    [_nghost-%COMP%]     .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 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: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\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 #f0f0f0;\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: #333;\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #666;\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 #f0f0f0;\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: #2196f3;\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: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: #2196f3;\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\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: #f8f9fa;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\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: white;\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 #f0f0f0;\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: #333;\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: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\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: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: #333;\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: #333;\n      border-bottom: 1px solid #f0f0f0;\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: #666;\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: #333;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\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: #f8f9fa;\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: #333;\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\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: #666;\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 #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\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: #999;\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: #333;\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 #e0e0e0;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\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: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\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: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\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 #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: #ddd;\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: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\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: #333;\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: #4caf50;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\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: #333;\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\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: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\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        height: calc(100vh - 270px); \n\n        margin-bottom: 20px;\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        height: calc(100vh - 270px); \n\n        min-height: 400px;\n        margin-bottom: 20px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 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: #666;\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')
+], ExecutionMonitoringComponent);
+export { ExecutionMonitoringComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
         type: Component,
         args: [{ selector: 'app-execution-monitoring', changeDetection: ChangeDetectionStrategy.OnPush, template: `
@@ -1478,10 +1509,7 @@ export class ExecutionMonitoringComponent {
       <!-- Loading Overlay -->
       @if (isLoading) {
         <div class="loading-overlay">
-          <div class="loading-content">
-            <i class="fa-solid fa-spinner fa-spin fa-3x"></i>
-            <p>Loading dashboard data...</p>
-          </div>
+          <mj-loading text="Loading dashboard data..." size="large"></mj-loading>
         </div>
       }
       <!-- Header Controls -->
@@ -1646,8 +1674,7 @@ export class ExecutionMonitoringComponent {
                         
                         @if (loadingDrillDown) {
                           <div class="loading-spinner">
-                            <i class="fa-solid fa-spinner fa-spin"></i>
-                            Loading execution details...
+                            <mj-loading text="Loading execution details..." size="small"></mj-loading>
                           </div>
                         } @else if (activeTab?.data?.length > 0) {
                           <div class="executions-table">
@@ -1705,8 +1732,7 @@ export class ExecutionMonitoringComponent {
                         
                         @if (loadingDrillDown) {
                           <div class="loading-spinner">
-                            <i class="fa-solid fa-spinner fa-spin"></i>
-                            Loading model details...
+                            <mj-loading text="Loading model details..." size="small"></mj-loading>
                           </div>
                         } @else if (activeTab?.data) {
                           <div class="model-details">
@@ -1989,8 +2015,7 @@ export class ExecutionMonitoringComponent {
             
             @if (loadingExecutionDetails) {
               <div class="loading-details">
-                <div class="spinner"></div>
-                <p>Loading execution details...</p>
+                <mj-loading text="Loading execution details..." size="medium"></mj-loading>
               </div>
             }
           </div>
@@ -1998,13 +2023,7 @@ export class ExecutionMonitoringComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    .execution-monitoring {\n      padding: 20px;\n      background: #f8f9fa;\n      min-height: 100vh;\n      position: relative;\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: rgba(255, 255, 255, 0.5);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(1px);\n    }\n    \n    .loading-content {\n      text-align: center;\n      padding: 40px;\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n    }\n    \n    .loading-content i {\n      color: #2196f3;\n      margin-bottom: 20px;\n      display: block;\n    }\n    \n    .loading-content p {\n      margin: 0;\n      font-size: 16px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .monitoring-header {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: #2196f3;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 16px;\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: 12px;\n    }\n\n    .time-range-control label {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    \n    .time-range-control select:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #f5f5f5;\n    }\n\n    .refresh-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #e0e0e0;\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      margin-bottom: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      height: calc(100vh - 550px); /* Increased to account for headers and margins */\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* Ensure splitter panes take full height */\n    :host ::ng-deep .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    :host ::ng-deep .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 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: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: #2196f3;\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 #f0f0f0;\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: #333;\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: #666;\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 #f0f0f0;\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: #2196f3;\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: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n    }\n\n    .token-segment--input {\n      background: #4caf50;\n    }\n\n    .token-segment--output {\n      background: #2196f3;\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label {\n      color: #4caf50;\n    }\n\n    .output-label {\n      color: #2196f3;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: #999;\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: #f8f9fa;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: #999;\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: white;\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 #f0f0f0;\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: #333;\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\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: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: #333;\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: #333;\n      border-bottom: 1px solid #f0f0f0;\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: #666;\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: #333;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\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: #f8f9fa;\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: #333;\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\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: #666;\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    .spinner {\n      width: 32px;\n      height: 32px;\n      border: 3px solid #f3f3f3;\n      border-top: 3px solid #2196f3;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\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 #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\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: #999;\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: #333;\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 #e0e0e0;\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\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: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\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: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\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 #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\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: #999;\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: #ddd;\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: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: #666;\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: #333;\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: #4caf50;\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: #f8f9fa;\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: #333;\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\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: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: slideDown 0.2s ease-out;\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        height: calc(100vh - 270px); /* Consistent with main height */\n        margin-bottom: 20px;\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        height: calc(100vh - 270px); /* Consistent with main height */\n        min-height: 400px;\n        margin-bottom: 20px;\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 .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 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: #666;\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: i0.ChangeDetectorRef }], { initialState: [{
-            type: Input
-        }], openEntityRecord: [{
-            type: Output
-        }], stateChange: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1772 }); })();
+  `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: #f8f9fa;\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\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: rgba(255, 255, 255, 0.5);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(1px);\n    }\n    \n\n    .monitoring-header {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: #2196f3;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 16px;\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: 12px;\n    }\n\n    .time-range-control label {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    \n    .time-range-control select:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #f5f5f5;\n    }\n\n    .refresh-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      background: #e0e0e0;\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      margin-bottom: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      height: calc(100vh - 550px); /* Increased to account for headers and margins */\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* Ensure splitter panes take full height */\n    :host ::ng-deep .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    :host ::ng-deep .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 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: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: #2196f3;\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 #f0f0f0;\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: #333;\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: #666;\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 #f0f0f0;\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: #2196f3;\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: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n    }\n\n    .token-segment--input {\n      background: #4caf50;\n    }\n\n    .token-segment--output {\n      background: #2196f3;\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label {\n      color: #4caf50;\n    }\n\n    .output-label {\n      color: #2196f3;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: #999;\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: #f8f9fa;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: #999;\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: white;\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 #f0f0f0;\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: #333;\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\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: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: #333;\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: #333;\n      border-bottom: 1px solid #f0f0f0;\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: #666;\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: #333;\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: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\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: #f8f9fa;\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: #333;\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\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: #666;\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 #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\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: #999;\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: #333;\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 #e0e0e0;\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\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: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\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: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\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 #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\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: #999;\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: #ddd;\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: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: #666;\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: #333;\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: #4caf50;\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: #f8f9fa;\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: #333;\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\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: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: slideDown 0.2s ease-out;\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        height: calc(100vh - 270px); /* Consistent with main height */\n        margin-bottom: 20px;\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        height: calc(100vh - 270px); /* Consistent with main height */\n        min-height: 400px;\n        margin-bottom: 20px;\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 .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 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: #666;\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); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1753 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map