@memberjunction/ng-dashboards 2.50.0 → 2.52.0

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

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { Component, Output, EventEmitter, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { map, takeUntil, debounceTime } from 'rxjs/operators';
 import { RunView } from '@memberjunction/core';
@@ -15,10 +15,17 @@ const _forTrack0 = ($index, $item) => $item.title;
 const _forTrack1 = ($index, $item) => $item.id;
 const _forTrack2 = ($index, $item) => $item.model;
 const _c0 = () => [];
-function ExecutionMonitoringComponent_For_40_Template(rf, ctx) { if (rf & 1) {
+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()()();
+} }
+function ExecutionMonitoringComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-kpi-card", 52);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_40_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.ɵɵelementStart(0, "app-kpi-card", 53);
+    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) {
     const kpi_r2 = ctx.$implicit;
@@ -26,53 +33,53 @@ function ExecutionMonitoringComponent_For_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("clickable", ctx_r2.isKpiClickable(kpi_r2));
     i0.ɵɵproperty("data", kpi_r2);
 } }
-function ExecutionMonitoringComponent_Conditional_52_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 53)(2, "div", 54);
-    i0.ɵɵelement(3, "i", 55);
+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.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
+    i0.ɵɵelementStart(4, "div", 57)(5, "div", 58);
     i0.ɵɵtext(6, "Success Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵelementStart(7, "div", 59);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 59);
+    i0.ɵɵelementStart(9, "div", 60);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 53)(12, "div", 60);
-    i0.ɵɵelement(13, "i", 61);
+    i0.ɵɵelementStart(11, "div", 54)(12, "div", 61);
+    i0.ɵɵelement(13, "i", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 56)(15, "div", 57);
+    i0.ɵɵelementStart(14, "div", 57)(15, "div", 58);
     i0.ɵɵtext(16, "Error Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 58);
+    i0.ɵɵelementStart(17, "div", 59);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 59);
+    i0.ɵɵelementStart(19, "div", 60);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 53)(22, "div", 62);
-    i0.ɵɵelement(23, "i", 63);
+    i0.ɵɵelementStart(21, "div", 54)(22, "div", 63);
+    i0.ɵɵelement(23, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
+    i0.ɵɵelementStart(24, "div", 57)(25, "div", 58);
     i0.ɵɵtext(26, "Avg Response Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 58);
+    i0.ɵɵelementStart(27, "div", 59);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 59);
+    i0.ɵɵelementStart(29, "div", 60);
     i0.ɵɵtext(30, "Across all models");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 53)(32, "div", 64);
-    i0.ɵɵelement(33, "i", 49);
+    i0.ɵɵelementStart(31, "div", 54)(32, "div", 65);
+    i0.ɵɵelement(33, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
+    i0.ɵɵelementStart(34, "div", 57)(35, "div", 58);
     i0.ɵɵtext(36, "Active Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 58);
+    i0.ɵɵelementStart(37, "div", 59);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 59);
+    i0.ɵɵelementStart(39, "div", 60);
     i0.ɵɵtext(40, "Currently running");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -91,21 +98,21 @@ function ExecutionMonitoringComponent_Conditional_52_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(10);
     i0.ɵɵtextInterpolate(kpis_r4.activeExecutions);
 } }
-function ExecutionMonitoringComponent_For_59_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_For_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 68);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_59_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", 69);
+    i0.ɵɵelementStart(0, "button", 69);
+    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.ɵɵelementEnd();
 } }
-function ExecutionMonitoringComponent_For_59_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_For_46_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_59_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", 66);
+    i0.ɵɵelementStart(0, "div", 66);
+    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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ExecutionMonitoringComponent_For_59_Conditional_3_Template, 2, 0, "button", 67);
+    i0.ɵɵtemplate(3, ExecutionMonitoringComponent_For_46_Conditional_3_Template, 2, 0, "button", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r6 = ctx.$implicit;
@@ -116,11 +123,11 @@ function ExecutionMonitoringComponent_For_59_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(tab_r6.closeable ? 3 : -1);
 } }
-function ExecutionMonitoringComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "app-time-series-chart", 70);
+    i0.ɵɵelementStart(0, "div", 34)(1, "app-time-series-chart", 71);
     i0.ɵɵpipe(2, "async");
-    i0.ɵɵlistener("dataPointClick", function ExecutionMonitoringComponent_Conditional_61_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_61_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.ɵɵ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()();
 } if (rf & 2) {
     let tmp_1_0;
@@ -128,8 +135,8 @@ function ExecutionMonitoringComponent_Conditional_61_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     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_62_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
+function ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -137,8 +144,8 @@ function ExecutionMonitoringComponent_Conditional_62_Conditional_6_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedTimestamp(ctx_r2.activeTab));
 } }
-function ExecutionMonitoringComponent_Conditional_62_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 75);
+function ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 76);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -146,38 +153,38 @@ function ExecutionMonitoringComponent_Conditional_62_Conditional_7_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedMetricLabel(ctx_r2.activeTab));
 } }
-function ExecutionMonitoringComponent_Conditional_62_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵelement(1, "i", 79);
+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.ɵɵelementEnd();
 } }
-function ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_62_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", 84)(2, "span", 85);
+    i0.ɵɵelementStart(0, "div", 84);
+    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.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 84);
+    i0.ɵɵelementStart(4, "div", 85);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 84);
+    i0.ɵɵelementStart(6, "div", 85);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 84)(9, "span", 86);
+    i0.ɵɵelementStart(8, "div", 85)(9, "span", 87);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 84);
+    i0.ɵɵelementStart(11, "div", 85);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 84);
+    i0.ɵɵelementStart(13, "div", 85);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 84);
+    i0.ɵɵelementStart(15, "div", 85);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 84);
+    i0.ɵɵelementStart(17, "div", 85);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -204,54 +211,54 @@ function ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.formatTime(execution_r10.startTime));
 } }
-function ExecutionMonitoringComponent_Conditional_62_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77)(1, "div", 80)(2, "div", 81);
+function ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "div", 81)(2, "div", 82);
     i0.ɵɵtext(3, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 81);
+    i0.ɵɵelementStart(4, "div", 82);
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 81);
+    i0.ɵɵelementStart(6, "div", 82);
     i0.ɵɵtext(7, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 81);
+    i0.ɵɵelementStart(8, "div", 82);
     i0.ɵɵtext(9, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 81);
+    i0.ɵɵelementStart(10, "div", 82);
     i0.ɵɵtext(11, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 81);
+    i0.ɵɵelementStart(12, "div", 82);
     i0.ɵɵtext(13, "Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 81);
+    i0.ɵɵelementStart(14, "div", 82);
     i0.ɵɵtext(15, "Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 81);
+    i0.ɵɵelementStart(16, "div", 82);
     i0.ɵɵtext(17, "Time");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Template, 19, 12, "div", 82, _forTrack1);
+    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template, 19, 12, "div", 83, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(18);
     i0.ɵɵrepeater(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data);
 } }
-function ExecutionMonitoringComponent_Conditional_62_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵelement(1, "i", 87);
+function ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 88);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No executions found for this time period");
     i0.ɵɵelementEnd()();
 } }
-function ExecutionMonitoringComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 71)(2, "h4");
-    i0.ɵɵelement(3, "i", 72);
+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.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 73);
-    i0.ɵɵtemplate(6, ExecutionMonitoringComponent_Conditional_62_Conditional_6_Template, 2, 1, "span", 74)(7, ExecutionMonitoringComponent_Conditional_62_Conditional_7_Template, 2, 1, "span", 75);
+    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.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, ExecutionMonitoringComponent_Conditional_62_Conditional_8_Template, 3, 0, "div", 76)(9, ExecutionMonitoringComponent_Conditional_62_Conditional_9_Template, 20, 0, "div", 77)(10, ExecutionMonitoringComponent_Conditional_62_Conditional_10_Template, 4, 0, "div", 78);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -264,14 +271,14 @@ function ExecutionMonitoringComponent_Conditional_62_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     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_63_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵelement(1, "i", 79);
+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.ɵɵelementEnd();
 } }
-function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93)(1, "h5");
+function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94)(1, "h5");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
@@ -282,44 +289,44 @@ function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Conditional_3
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description);
 } }
-function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90)(2, "div", 91)(3, "label");
+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.ɵɵtext(4, "Model Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 91)(8, "label");
+    i0.ɵɵelementStart(7, "div", 92)(8, "label");
     i0.ɵɵtext(9, "Vendor:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 91)(13, "label");
+    i0.ɵɵelementStart(12, "div", 92)(13, "label");
     i0.ɵɵtext(14, "API Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 91)(18, "label");
+    i0.ɵɵelementStart(17, "div", 92)(18, "label");
     i0.ɵɵtext(19, "Input Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 91)(23, "label");
+    i0.ɵɵelementStart(22, "div", 92)(23, "label");
     i0.ɵɵtext(24, "Output Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(25, "span");
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 91)(28, "label");
+    i0.ɵɵelementStart(27, "div", 92)(28, "label");
     i0.ɵɵtext(29, "Active:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 92);
+    i0.ɵɵelementStart(30, "span", 93);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(32, ExecutionMonitoringComponent_Conditional_63_Conditional_6_Conditional_32_Template, 5, 1, "div", 93);
+    i0.ɵɵtemplate(32, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template, 5, 1, "div", 94);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -340,12 +347,12 @@ function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description) ? 32 : -1);
 } }
-function ExecutionMonitoringComponent_Conditional_63_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 71)(2, "h4");
-    i0.ɵɵelement(3, "i", 88);
+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.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, ExecutionMonitoringComponent_Conditional_63_Conditional_5_Template, 3, 0, "div", 76)(6, ExecutionMonitoringComponent_Conditional_63_Conditional_6_Template, 33, 9, "div", 89);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -354,17 +361,17 @@ function ExecutionMonitoringComponent_Conditional_63_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 5 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data) ? 6 : -1);
 } }
-function ExecutionMonitoringComponent_Conditional_78_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96)(2, "span", 97);
+function ExecutionMonitoringComponent_Conditional_65_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96)(1, "div", 97)(2, "span", 98);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 98);
+    i0.ɵɵelementStart(4, "span", 99);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 99);
-    i0.ɵɵelement(7, "div", 100);
+    i0.ɵɵelementStart(6, "div", 100);
+    i0.ɵɵelement(7, "div", 101);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 101);
+    i0.ɵɵelementStart(8, "div", 102);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -380,17 +387,17 @@ function ExecutionMonitoringComponent_Conditional_78_Conditional_1_For_2_Templat
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatTokens(item_r11.tokens), " tokens ");
 } }
-function ExecutionMonitoringComponent_Conditional_78_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94);
-    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_78_Conditional_1_For_2_Template, 10, 5, "div", 95, _forTrack2);
+function ExecutionMonitoringComponent_Conditional_65_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_65_Conditional_1_For_2_Template, 10, 5, "div", 96, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx.slice(0, 8));
 } }
-function ExecutionMonitoringComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_78_Conditional_1_Template, 3, 0, "div", 94);
+function ExecutionMonitoringComponent_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_65_Conditional_1_Template, 3, 0, "div", 95);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -399,23 +406,23 @@ function ExecutionMonitoringComponent_Conditional_78_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.costData$)) ? 1 : -1, tmp_1_0);
 } }
-function ExecutionMonitoringComponent_Conditional_85_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103)(1, "div", 104)(2, "span", 97);
+function ExecutionMonitoringComponent_Conditional_72_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104)(1, "div", 105)(2, "span", 98);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 105);
+    i0.ɵɵelementStart(4, "span", 106);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 106)(7, "div", 107);
-    i0.ɵɵelement(8, "div", 108)(9, "div", 109);
+    i0.ɵɵelementStart(6, "div", 107)(7, "div", 108);
+    i0.ɵɵelement(8, "div", 109)(9, "div", 110);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 110)(11, "span", 111);
+    i0.ɵɵelementStart(10, "div", 111)(11, "span", 112);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 112);
+    i0.ɵɵelementStart(13, "span", 113);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 113);
+    i0.ɵɵelementStart(15, "div", 114);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -436,17 +443,17 @@ function ExecutionMonitoringComponent_Conditional_85_Conditional_1_For_2_Templat
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatCostPerToken(item_r13.cost, item_r13.inputTokens + item_r13.outputTokens), " ");
 } }
-function ExecutionMonitoringComponent_Conditional_85_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_85_Conditional_1_For_2_Template, 17, 9, "div", 103, _forTrack2);
+function ExecutionMonitoringComponent_Conditional_72_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_72_Conditional_1_For_2_Template, 17, 9, "div", 104, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx.slice(0, 6));
 } }
-function ExecutionMonitoringComponent_Conditional_85_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_85_Conditional_1_Template, 3, 0, "div", 102);
+function ExecutionMonitoringComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_72_Conditional_1_Template, 3, 0, "div", 103);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -455,11 +462,11 @@ function ExecutionMonitoringComponent_Conditional_85_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.tokenEfficiency$)) ? 1 : -1, tmp_1_0);
 } }
-function ExecutionMonitoringComponent_Conditional_92_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 50)(1, "app-live-execution-widget", 114);
+    i0.ɵɵelementStart(0, "div", 49)(1, "app-live-execution-widget", 115);
     i0.ɵɵpipe(2, "async");
-    i0.ɵɵlistener("executionClick", function ExecutionMonitoringComponent_Conditional_92_Template_app_live_execution_widget_executionClick_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExecutionClick($event)); });
+    i0.ɵɵlistener("executionClick", function ExecutionMonitoringComponent_Conditional_79_Template_app_live_execution_widget_executionClick_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExecutionClick($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_1_0;
@@ -467,8 +474,8 @@ function ExecutionMonitoringComponent_Conditional_92_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("executions", (tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.liveExecutions$)) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(3, _c0));
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 127)(1, "label");
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 128)(1, "label");
     i0.ɵɵtext(2, "Completed:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -480,8 +487,8 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.executionDetails.endTime, "medium"));
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 127)(1, "label");
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 128)(1, "label");
     i0.ɵɵtext(2, "Model:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -492,11 +499,11 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.executionDetails.model);
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125)(1, "h4");
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 126)(1, "h4");
     i0.ɵɵtext(2, "Error Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 128);
+    i0.ɵɵelementStart(3, "div", 129);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -504,17 +511,17 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.executionDetails.errorMessage);
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 130)(1, "div", 131)(2, "span", 132);
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 131)(1, "div", 132)(2, "span", 133);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 133);
+    i0.ɵɵelementStart(4, "span", 134);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 134);
+    i0.ɵɵelementStart(6, "span", 135);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 135)(9, "span");
+    i0.ɵɵelementStart(8, "div", 136)(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "span");
@@ -536,12 +543,12 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", child_r16.tokens.toLocaleString(), " tokens");
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125)(1, "h4");
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 126)(1, "h4");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 129);
-    i0.ɵɵrepeaterCreate(4, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_For_5_Template, 13, 7, "div", 130, _forTrack1);
+    i0.ɵɵelementStart(3, "div", 130);
+    i0.ɵɵrepeaterCreate(4, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_For_5_Template, 13, 7, "div", 131, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -550,62 +557,62 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.executionDetails.children);
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 123)(1, "div", 125)(2, "h4");
+function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 124)(1, "div", 126)(2, "h4");
     i0.ɵɵtext(3, "Basic Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 126)(5, "div", 127)(6, "label");
+    i0.ɵɵelementStart(4, "div", 127)(5, "div", 128)(6, "label");
     i0.ɵɵtext(7, "Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "span");
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "titlecase");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 127)(12, "label");
+    i0.ɵɵelementStart(11, "div", 128)(12, "label");
     i0.ɵɵtext(13, "Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 127)(17, "label");
+    i0.ɵɵelementStart(16, "div", 128)(17, "label");
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 86);
+    i0.ɵɵelementStart(19, "span", 87);
     i0.ɵɵtext(20);
     i0.ɵɵpipe(21, "titlecase");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 127)(23, "label");
+    i0.ɵɵelementStart(22, "div", 128)(23, "label");
     i0.ɵɵtext(24, "Started:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(25, "span");
     i0.ɵɵtext(26);
     i0.ɵɵpipe(27, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(28, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_28_Template, 6, 4, "div", 127);
-    i0.ɵɵelementStart(29, "div", 127)(30, "label");
+    i0.ɵɵtemplate(28, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_28_Template, 6, 4, "div", 128);
+    i0.ɵɵelementStart(29, "div", 128)(30, "label");
     i0.ɵɵtext(31, "Duration:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(32, "span");
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(34, "div", 125)(35, "h4");
+    i0.ɵɵelementStart(34, "div", 126)(35, "h4");
     i0.ɵɵtext(36, "Resource Usage");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 126)(38, "div", 127)(39, "label");
+    i0.ɵɵelementStart(37, "div", 127)(38, "div", 128)(39, "label");
     i0.ɵɵtext(40, "Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(41, "span");
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 127)(44, "label");
+    i0.ɵɵelementStart(43, "div", 128)(44, "label");
     i0.ɵɵtext(45, "Tokens:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "span");
     i0.ɵɵtext(47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(48, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_48_Template, 5, 1, "div", 127);
+    i0.ɵɵtemplate(48, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_48_Template, 5, 1, "div", 128);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(49, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_49_Template, 5, 1, "div", 125)(50, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_Template, 6, 1, "div", 125);
+    i0.ɵɵtemplate(49, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_49_Template, 5, 1, "div", 126)(50, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_Template, 6, 1, "div", 126);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -634,33 +641,33 @@ function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.executionDetails.children.length > 0 ? 50 : -1);
 } }
-function ExecutionMonitoringComponent_Conditional_93_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 124);
-    i0.ɵɵelement(1, "div", 136);
+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()();
 } }
-function ExecutionMonitoringComponent_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 115);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
-    i0.ɵɵelementStart(1, "div", 116);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 117)(3, "h3");
+    i0.ɵɵelementStart(0, "div", 116);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_80_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
+    i0.ɵɵelementStart(1, "div", 117);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_80_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 118)(3, "h3");
     i0.ɵɵtext(4, "Execution Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 118)(6, "button", 119);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openFullRecord()); });
-    i0.ɵɵelement(7, "i", 120);
+    i0.ɵɵelementStart(5, "div", 119)(6, "button", 120);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_80_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openFullRecord()); });
+    i0.ɵɵelement(7, "i", 121);
     i0.ɵɵtext(8, " Open ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 121);
-    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
-    i0.ɵɵelement(10, "i", 69);
+    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.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 122);
-    i0.ɵɵtemplate(12, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Template, 51, 20, "div", 123)(13, ExecutionMonitoringComponent_Conditional_93_Conditional_13_Template, 4, 0, "div", 124);
+    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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -671,13 +678,13 @@ function ExecutionMonitoringComponent_Conditional_93_Template(rf, ctx) { if (rf
 } }
 export class ExecutionMonitoringComponent {
     instrumentationService;
+    cdr;
     initialState;
     openEntityRecord = new EventEmitter();
     stateChange = new EventEmitter();
     destroy$ = new Subject();
     stateChangeSubject$ = new Subject();
     // Configuration
-    refreshInterval = 30000; // 30 seconds
     selectedTimeRange = '24h';
     isLoading = false;
     // Chart configurations
@@ -719,13 +726,19 @@ export class ExecutionMonitoringComponent {
     get activeTab() {
         return this.drillDownTabs.find(tab => tab.id === this.activeTabId);
     }
-    constructor(instrumentationService) {
+    constructor(instrumentationService, cdr) {
         this.instrumentationService = instrumentationService;
+        this.cdr = cdr;
         // Initialize data streams
         this.kpis$ = this.instrumentationService.kpis$;
         this.trends$ = this.instrumentationService.trends$;
         this.liveExecutions$ = this.instrumentationService.liveExecutions$;
         this.chartData$ = this.instrumentationService.chartData$;
+        // Subscribe to loading state from service
+        this.instrumentationService.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
+            this.isLoading = loading;
+            this.cdr.markForCheck();
+        });
         // Derived streams
         this.kpiCards$ = this.kpis$.pipe(map(kpis => this.createKPICards(kpis)));
         this.performanceMatrix$ = this.chartData$.pipe(map(data => data.performanceMatrix.map(item => ({
@@ -744,7 +757,6 @@ export class ExecutionMonitoringComponent {
         }
         else {
             // Default initialization
-            this.instrumentationService.setRefreshInterval(this.refreshInterval);
             this.setTimeRange(this.selectedTimeRange);
             // Initialize with main chart tab
             this.drillDownTabs = [
@@ -755,6 +767,8 @@ export class ExecutionMonitoringComponent {
                     closeable: false
                 }
             ];
+            // Trigger initial data load
+            this.instrumentationService.refresh();
         }
         // Set up debounced state change emission
         this.stateChangeSubject$.pipe(debounceTime(2000), // 2 second debounce
@@ -770,7 +784,7 @@ export class ExecutionMonitoringComponent {
     getCurrentState() {
         return {
             selectedTimeRange: this.selectedTimeRange,
-            refreshInterval: this.refreshInterval,
+            refreshInterval: 0, // Always manual refresh now
             panelStates: { ...this.panelStates },
             drillDownTabs: this.drillDownTabs.map(tab => ({
                 id: tab.id,
@@ -791,10 +805,7 @@ export class ExecutionMonitoringComponent {
             this.selectedTimeRange = state.selectedTimeRange;
             this.setTimeRange(state.selectedTimeRange);
         }
-        if (state.refreshInterval !== undefined) {
-            this.refreshInterval = state.refreshInterval;
-            this.instrumentationService.setRefreshInterval(this.refreshInterval);
-        }
+        // No longer need to handle refreshInterval since we removed auto-refresh
         if (state.panelStates) {
             // Only override if state has explicit panel states, otherwise keep defaults
             this.panelStates = { ...this.panelStates, ...state.panelStates };
@@ -868,18 +879,20 @@ export class ExecutionMonitoringComponent {
             }
         ];
     }
-    onRefreshIntervalChange() {
-        this.instrumentationService.setRefreshInterval(this.refreshInterval);
-        this.emitStateChange();
-    }
     onTimeRangeChange() {
+        // Simply change time range - loading state is managed by the service
         this.setTimeRange(this.selectedTimeRange);
         this.emitStateChange();
     }
     setTimeRange(range) {
+        const { start, end } = this.getTimeRangeFromSelection(range);
+        this.instrumentationService.setDateRange(start, end);
+    }
+    getTimeRangeFromSelection(range) {
         const now = new Date();
+        const selectedRange = range || this.selectedTimeRange;
         let start;
-        switch (range) {
+        switch (selectedRange) {
             case '1h':
                 start = new Date(now.getTime() - 60 * 60 * 1000);
                 break;
@@ -898,17 +911,11 @@ export class ExecutionMonitoringComponent {
             default:
                 start = new Date(now.getTime() - 24 * 60 * 60 * 1000);
         }
-        this.instrumentationService.setDateRange(start, now);
+        return { start, end: now };
     }
     refreshData() {
-        this.isLoading = true;
-        // Force refresh by temporarily setting interval to 0 and back
-        const currentInterval = this.refreshInterval;
-        this.instrumentationService.setRefreshInterval(0);
-        setTimeout(() => {
-            this.instrumentationService.setRefreshInterval(currentInterval);
-            this.isLoading = false;
-        }, 100);
+        // Simply trigger refresh - loading state is managed by the service
+        this.instrumentationService.refresh();
     }
     onExecutionClick(execution) {
         this.selectedExecution = execution;
@@ -932,6 +939,7 @@ export class ExecutionMonitoringComponent {
         if (!this.drillDownTabs.find(tab => tab.id === tabId)) {
             this.drillDownTabs.push(newTab);
             this.emitStateChange(); // Emit state when new tab is added
+            this.cdr.markForCheck();
         }
         // Switch to the new tab
         this.selectTab(tabId);
@@ -1050,6 +1058,7 @@ export class ExecutionMonitoringComponent {
             window.dispatchEvent(new Event('resize'));
         }, 100);
         this.emitStateChange();
+        this.cdr.markForCheck();
     }
     closeTab(event, tabId) {
         event.stopPropagation();
@@ -1111,9 +1120,39 @@ export class ExecutionMonitoringComponent {
             return;
         this.loadingDrillDown = true;
         try {
-            // Create time window around the clicked point (±30 minutes)
-            const startTime = new Date(tab.timestamp.getTime() - 30 * 60 * 1000);
-            const endTime = new Date(tab.timestamp.getTime() + 30 * 60 * 1000);
+            // Determine bucket size based on selected time range
+            const { start, end } = this.getTimeRangeFromSelection();
+            const duration = end.getTime() - start.getTime();
+            const hours = duration / (1000 * 60 * 60);
+            let windowSizeMs;
+            let alignToDay = false;
+            if (hours <= 24) {
+                // For up to 24 hours, use 1 hour window (30 min before and after)
+                windowSizeMs = 30 * 60 * 1000;
+            }
+            else if (hours <= 24 * 7) {
+                // For up to 7 days, use full day window
+                // Since data is aggregated into 4-hour buckets, we need to capture the full day
+                windowSizeMs = 12 * 60 * 60 * 1000; // 12 hours before/after = 24 hour window
+                alignToDay = true;
+            }
+            else {
+                // For more than 7 days, use full day window
+                windowSizeMs = 12 * 60 * 60 * 1000; // 12 hours before/after = 24 hour window
+                alignToDay = true;
+            }
+            // Create time window around the clicked point
+            let startTime = new Date(tab.timestamp.getTime() - windowSizeMs);
+            let endTime = new Date(tab.timestamp.getTime() + windowSizeMs);
+            // For day-aligned queries, expand to full day boundaries
+            if (alignToDay) {
+                // Set start to beginning of the day
+                startTime = new Date(tab.timestamp);
+                startTime.setHours(0, 0, 0, 0);
+                // Set end to end of the day
+                endTime = new Date(tab.timestamp);
+                endTime.setHours(23, 59, 59, 999);
+            }
             // Load executions for this time period
             const [promptResults, agentResults] = await Promise.all([
                 new RunView().RunView({
@@ -1139,8 +1178,8 @@ export class ExecutionMonitoringComponent {
                 executions.push({
                     id: run.ID,
                     type: 'prompt',
-                    name: await this.getPromptName(run.PromptID),
-                    model: run.ModelID ? await this.getModelName(run.ModelID) : undefined,
+                    name: run.Prompt || 'Unnamed Prompt',
+                    model: run.Model || undefined,
                     status: run.Success ? 'completed' : (run.Success === false ? 'failed' : 'running'),
                     startTime: new Date(run.RunAt),
                     endTime: run.CompletedAt ? new Date(run.CompletedAt) : undefined,
@@ -1158,7 +1197,7 @@ export class ExecutionMonitoringComponent {
                 executions.push({
                     id: run.ID,
                     type: 'agent',
-                    name: await this.getAgentName(run.AgentID),
+                    name: run.Agent || 'Unnamed Agent',
                     status: run.Status.toLowerCase(),
                     startTime: new Date(run.StartedAt),
                     endTime: run.CompletedAt ? new Date(run.CompletedAt) : undefined,
@@ -1172,13 +1211,16 @@ export class ExecutionMonitoringComponent {
             executions.sort((a, b) => b.startTime.getTime() - a.startTime.getTime());
             // Update tab data
             tab.data = executions;
+            this.cdr.markForCheck();
         }
         catch (error) {
             console.error('Error loading drill-down data:', error);
             tab.data = [];
+            this.cdr.markForCheck();
         }
         finally {
             this.loadingDrillDown = false;
+            this.cdr.markForCheck();
         }
     }
     async loadModelDetails(tab, modelName) {
@@ -1216,48 +1258,6 @@ export class ExecutionMonitoringComponent {
         }
     }
     // Helper methods for drill-down
-    async getPromptName(promptId) {
-        try {
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'AI Prompts',
-                ExtraFilter: `ID = '${promptId}'`,
-                ResultType: 'entity_object'
-            });
-            return result.Results[0]?.Name || 'Unknown Prompt';
-        }
-        catch {
-            return 'Unknown Prompt';
-        }
-    }
-    async getAgentName(agentId) {
-        try {
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'AI Agents',
-                ExtraFilter: `ID = '${agentId}'`,
-                ResultType: 'entity_object'
-            });
-            return result.Results[0]?.Name || 'Unknown Agent';
-        }
-        catch {
-            return 'Unknown Agent';
-        }
-    }
-    async getModelName(modelId) {
-        try {
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'AI Models',
-                ExtraFilter: `ID = '${modelId}'`,
-                ResultType: 'entity_object'
-            });
-            return result.Results[0]?.Name || 'Unknown Model';
-        }
-        catch {
-            return 'Unknown Model';
-        }
-    }
     formatTimestamp(timestamp) {
         return timestamp.toLocaleString();
     }
@@ -1326,185 +1326,167 @@ 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)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 94, vars: 52, consts: [[1, "execution-monitoring"], [1, "monitoring-header"], [1, "monitoring-title"], [1, "fa-solid", "fa-chart-line"], [1, "monitoring-controls"], [1, "refresh-control"], [3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "time-range-control"], ["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"], [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) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵtext(4, " AI Execution Monitoring ");
+    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) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_1_Template, 5, 0, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "h2", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵtext(5, " AI Execution Monitoring ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 4)(6, "div", 5)(7, "label");
-            i0.ɵɵtext(8, "Refresh:");
+            i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "label");
+            i0.ɵɵtext(9, "Time Range:");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "select", 6);
-            i0.ɵɵtwoWayListener("ngModelChange", function ExecutionMonitoringComponent_Template_select_ngModelChange_9_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.refreshInterval, $event) || (ctx.refreshInterval = $event); return $event; });
-            i0.ɵɵlistener("change", function ExecutionMonitoringComponent_Template_select_change_9_listener() { return ctx.onRefreshIntervalChange(); });
-            i0.ɵɵelementStart(10, "option", 7);
-            i0.ɵɵtext(11, "Manual");
+            i0.ɵɵelementStart(10, "select", 7);
+            i0.ɵɵtwoWayListener("ngModelChange", function ExecutionMonitoringComponent_Template_select_ngModelChange_10_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedTimeRange, $event) || (ctx.selectedTimeRange = $event); return $event; });
+            i0.ɵɵlistener("change", function ExecutionMonitoringComponent_Template_select_change_10_listener() { return ctx.onTimeRangeChange(); });
+            i0.ɵɵelementStart(11, "option", 8);
+            i0.ɵɵtext(12, "Last Hour");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "option", 7);
-            i0.ɵɵtext(13, "10s");
+            i0.ɵɵelementStart(13, "option", 9);
+            i0.ɵɵtext(14, "Last 6 Hours");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "option", 7);
-            i0.ɵɵtext(15, "30s");
+            i0.ɵɵelementStart(15, "option", 10);
+            i0.ɵɵtext(16, "Last 24 Hours");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(16, "option", 7);
-            i0.ɵɵtext(17, "1m");
+            i0.ɵɵelementStart(17, "option", 11);
+            i0.ɵɵtext(18, "Last 7 Days");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "option", 7);
-            i0.ɵɵtext(19, "5m");
+            i0.ɵɵelementStart(19, "option", 12);
+            i0.ɵɵtext(20, "Last 30 Days");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(20, "div", 8)(21, "label");
-            i0.ɵɵtext(22, "Time Range:");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "select", 6);
-            i0.ɵɵtwoWayListener("ngModelChange", function ExecutionMonitoringComponent_Template_select_ngModelChange_23_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedTimeRange, $event) || (ctx.selectedTimeRange = $event); return $event; });
-            i0.ɵɵlistener("change", function ExecutionMonitoringComponent_Template_select_change_23_listener() { return ctx.onTimeRangeChange(); });
-            i0.ɵɵelementStart(24, "option", 9);
-            i0.ɵɵtext(25, "Last Hour");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(26, "option", 10);
-            i0.ɵɵtext(27, "Last 6 Hours");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "option", 11);
-            i0.ɵɵtext(29, "Last 24 Hours");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "option", 12);
-            i0.ɵɵtext(31, "Last 7 Days");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "option", 13);
-            i0.ɵɵtext(33, "Last 30 Days");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(34, "button", 14);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_34_listener() { return ctx.refreshData(); });
-            i0.ɵɵelement(35, "i", 15);
-            i0.ɵɵtext(36, " Refresh ");
+            i0.ɵɵelementStart(21, "button", 13);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_21_listener() { return ctx.refreshData(); });
+            i0.ɵɵelement(22, "i", 14);
+            i0.ɵɵtext(23, " Refresh ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(37, "div", 16)(38, "div", 17);
-            i0.ɵɵrepeaterCreate(39, ExecutionMonitoringComponent_For_40_Template, 1, 3, "app-kpi-card", 18, _forTrack0);
-            i0.ɵɵpipe(41, "async");
+            i0.ɵɵelementStart(24, "div", 15)(25, "div", 16);
+            i0.ɵɵrepeaterCreate(26, ExecutionMonitoringComponent_For_27_Template, 1, 3, "app-kpi-card", 17, _forTrack0);
+            i0.ɵɵpipe(28, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(42, "kendo-splitter", 19);
-            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_42_listener($event) { return ctx.onSplitterLayoutChange($event); });
-            i0.ɵɵelementStart(43, "kendo-splitter-pane", 20)(44, "kendo-splitter", 21);
-            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_44_listener($event) { return ctx.onSplitterLayoutChange($event); });
-            i0.ɵɵelementStart(45, "kendo-splitter-pane", 22)(46, "div", 23)(47, "div", 24)(48, "div", 25)(49, "h4", 26);
-            i0.ɵɵelement(50, "i", 27);
-            i0.ɵɵtext(51, " System Health ");
+            i0.ɵɵelementStart(29, "kendo-splitter", 18);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_29_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(30, "kendo-splitter-pane", 19)(31, "kendo-splitter", 20);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_31_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(32, "kendo-splitter-pane", 21)(33, "div", 22)(34, "div", 23)(35, "div", 24)(36, "h4", 25);
+            i0.ɵɵelement(37, "i", 26);
+            i0.ɵɵtext(38, " System Health ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(52, ExecutionMonitoringComponent_Conditional_52_Template, 41, 6, "div", 28);
-            i0.ɵɵpipe(53, "async");
+            i0.ɵɵtemplate(39, ExecutionMonitoringComponent_Conditional_39_Template, 41, 6, "div", 27);
+            i0.ɵɵpipe(40, "async");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(54, "kendo-splitter-pane", 29)(55, "div", 30)(56, "div", 31)(57, "div", 32);
-            i0.ɵɵrepeaterCreate(58, ExecutionMonitoringComponent_For_59_Template, 4, 4, "div", 33, _forTrack1);
+            i0.ɵɵelementStart(41, "kendo-splitter-pane", 28)(42, "div", 29)(43, "div", 30)(44, "div", 31);
+            i0.ɵɵrepeaterCreate(45, ExecutionMonitoringComponent_For_46_Template, 4, 4, "div", 32, _forTrack1);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(60, "div", 34);
-            i0.ɵɵtemplate(61, ExecutionMonitoringComponent_Conditional_61_Template, 3, 5, "div", 35)(62, ExecutionMonitoringComponent_Conditional_62_Template, 11, 4, "div", 36)(63, ExecutionMonitoringComponent_Conditional_63_Template, 7, 2, "div", 37);
+            i0.ɵɵelementStart(47, "div", 33);
+            i0.ɵɵtemplate(48, ExecutionMonitoringComponent_Conditional_48_Template, 3, 5, "div", 34)(49, ExecutionMonitoringComponent_Conditional_49_Template, 11, 4, "div", 35)(50, ExecutionMonitoringComponent_Conditional_50_Template, 7, 2, "div", 36);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(64, "kendo-splitter-pane", 29)(65, "kendo-splitter", 21);
-            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_65_listener($event) { return ctx.onSplitterLayoutChange($event); });
-            i0.ɵɵelementStart(66, "kendo-splitter-pane", 38)(67, "div", 39);
-            i0.ɵɵelement(68, "app-performance-heatmap", 40);
-            i0.ɵɵpipe(69, "async");
+            i0.ɵɵelementStart(51, "kendo-splitter-pane", 28)(52, "kendo-splitter", 20);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_52_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(53, "kendo-splitter-pane", 37)(54, "div", 38);
+            i0.ɵɵelement(55, "app-performance-heatmap", 39);
+            i0.ɵɵpipe(56, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(70, "kendo-splitter-pane", 29)(71, "div", 41)(72, "div", 42)(73, "div", 43);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_73_listener() { return ctx.togglePanel("cost"); });
-            i0.ɵɵelementStart(74, "span", 44);
-            i0.ɵɵelement(75, "i", 45);
-            i0.ɵɵtext(76, " Cost Analysis ");
+            i0.ɵɵelementStart(57, "kendo-splitter-pane", 28)(58, "div", 40)(59, "div", 41)(60, "div", 42);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_60_listener() { return ctx.togglePanel("cost"); });
+            i0.ɵɵelementStart(61, "span", 43);
+            i0.ɵɵelement(62, "i", 44);
+            i0.ɵɵtext(63, " Cost Analysis ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(77, "i", 46);
+            i0.ɵɵelement(64, "i", 45);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(78, ExecutionMonitoringComponent_Conditional_78_Template, 3, 3, "div", 47);
+            i0.ɵɵtemplate(65, ExecutionMonitoringComponent_Conditional_65_Template, 3, 3, "div", 46);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(79, "div", 42)(80, "div", 43);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_80_listener() { return ctx.togglePanel("efficiency"); });
-            i0.ɵɵelementStart(81, "span", 44);
-            i0.ɵɵelement(82, "i", 48);
-            i0.ɵɵtext(83, " Token Efficiency ");
+            i0.ɵɵelementStart(66, "div", 41)(67, "div", 42);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_67_listener() { return ctx.togglePanel("efficiency"); });
+            i0.ɵɵelementStart(68, "span", 43);
+            i0.ɵɵelement(69, "i", 47);
+            i0.ɵɵtext(70, " Token Efficiency ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(84, "i", 46);
+            i0.ɵɵelement(71, "i", 45);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(85, ExecutionMonitoringComponent_Conditional_85_Template, 3, 3, "div", 47);
+            i0.ɵɵtemplate(72, ExecutionMonitoringComponent_Conditional_72_Template, 3, 3, "div", 46);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(86, "div", 42)(87, "div", 43);
-            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_87_listener() { return ctx.togglePanel("executions"); });
-            i0.ɵɵelementStart(88, "span", 44);
-            i0.ɵɵelement(89, "i", 49);
-            i0.ɵɵtext(90, " Live Executions ");
+            i0.ɵɵelementStart(73, "div", 41)(74, "div", 42);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_74_listener() { return ctx.togglePanel("executions"); });
+            i0.ɵɵelementStart(75, "span", 43);
+            i0.ɵɵelement(76, "i", 48);
+            i0.ɵɵtext(77, " Live Executions ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(91, "i", 46);
+            i0.ɵɵelement(78, "i", 45);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(92, ExecutionMonitoringComponent_Conditional_92_Template, 3, 4, "div", 50);
+            i0.ɵɵtemplate(79, ExecutionMonitoringComponent_Conditional_79_Template, 3, 4, "div", 49);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵtemplate(93, ExecutionMonitoringComponent_Conditional_93_Template, 14, 2, "div", 51);
+            i0.ɵɵtemplate(80, ExecutionMonitoringComponent_Conditional_80_Template, 14, 2, "div", 50);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            let tmp_15_0;
-            let tmp_26_0;
-            i0.ɵɵadvance(9);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.refreshInterval);
+            let tmp_12_0;
+            let tmp_23_0;
+            i0.ɵɵclassProp("loading", ctx.isLoading);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("value", 0);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", 10000);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", 30000);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", 60000);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", 300000);
-            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
+            i0.ɵɵadvance(9);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedTimeRange);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
             i0.ɵɵadvance(11);
             i0.ɵɵproperty("disabled", ctx.isLoading);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("spinning", ctx.isLoading);
             i0.ɵɵadvance(4);
-            i0.ɵɵrepeater(i0.ɵɵpipeBind1(41, 45, ctx.kpiCards$));
+            i0.ɵɵrepeater(i0.ɵɵpipeBind1(28, 43, ctx.kpiCards$));
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("resizable", true)("collapsible", false);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("resizable", true)("collapsible", true)("collapsed", false);
             i0.ɵɵadvance(7);
-            i0.ɵɵconditional((tmp_15_0 = i0.ɵɵpipeBind1(53, 47, ctx.kpis$)) ? 52 : -1, tmp_15_0);
+            i0.ɵɵconditional((tmp_12_0 = i0.ɵɵpipeBind1(40, 45, ctx.kpis$)) ? 39 : -1, tmp_12_0);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("resizable", true)("collapsible", false);
             i0.ɵɵadvance(4);
             i0.ɵɵrepeater(ctx.drillDownTabs);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "chart" ? 61 : -1);
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "chart" ? 48 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "executions" ? 62 : -1);
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "executions" ? 49 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "model-detail" ? 63 : -1);
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "model-detail" ? 50 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("resizable", true)("collapsible", false);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("resizable", true)("collapsible", false);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("data", (tmp_26_0 = i0.ɵɵpipeBind1(69, 49, ctx.performanceMatrix$)) !== null && tmp_26_0 !== undefined ? tmp_26_0 : i0.ɵɵpureFunction0(51, _c0))("config", ctx.heatmapConfig);
+            i0.ɵɵproperty("data", (tmp_23_0 = i0.ɵɵpipeBind1(56, 47, ctx.performanceMatrix$)) !== null && tmp_23_0 !== undefined ? tmp_23_0 : i0.ɵɵpureFunction0(49, _c0))("config", ctx.heatmapConfig);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("resizable", true)("collapsible", false);
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.cost)("fa-chevron-up", ctx.panelStates.cost);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.panelStates.cost ? 78 : -1);
+            i0.ɵɵconditional(ctx.panelStates.cost ? 65 : -1);
             i0.ɵɵadvance(6);
             i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.efficiency)("fa-chevron-up", ctx.panelStates.efficiency);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.panelStates.efficiency ? 85 : -1);
+            i0.ɵɵconditional(ctx.panelStates.efficiency ? 72 : -1);
             i0.ɵɵadvance(6);
             i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.executions)("fa-chevron-up", ctx.panelStates.executions);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.panelStates.executions ? 92 : -1);
+            i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedExecution ? 93 : -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    }\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    .refresh-control[_ngcontent-%COMP%], .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .refresh-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%], .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .refresh-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], .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    }\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    }\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    }"] });
+            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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
         type: Component,
-        args: [{ selector: 'app-execution-monitoring', template: `
-    <div class="execution-monitoring">
+        args: [{ selector: 'app-execution-monitoring', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="execution-monitoring" [class.loading]="isLoading">
+      <!-- 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>
+        </div>
+      }
       <!-- Header Controls -->
       <div class="monitoring-header">
         <h2 class="monitoring-title">
@@ -1513,20 +1495,9 @@ export class ExecutionMonitoringComponent {
         </h2>
         
         <div class="monitoring-controls">
-          <div class="refresh-control">
-            <label>Refresh:</label>
-            <select [(ngModel)]="refreshInterval" (change)="onRefreshIntervalChange()">
-              <option [value]="0">Manual</option>
-              <option [value]="10000">10s</option>
-              <option [value]="30000">30s</option>
-              <option [value]="60000">1m</option>
-              <option [value]="300000">5m</option>
-            </select>
-          </div>
-          
           <div class="time-range-control">
             <label>Time Range:</label>
-            <select [(ngModel)]="selectedTimeRange" (change)="onTimeRangeChange()">
+            <select [(ngModel)]="selectedTimeRange" (change)="onTimeRangeChange()" [disabled]="isLoading">
               <option value="1h">Last Hour</option>
               <option value="6h">Last 6 Hours</option>
               <option value="24h">Last 24 Hours</option>
@@ -2030,13 +2001,13 @@ export class ExecutionMonitoringComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    .execution-monitoring {\n      padding: 20px;\n      background: #f8f9fa;\n      min-height: 100vh;\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    .refresh-control, .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .refresh-control label, .time-range-control label {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .refresh-control select, .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    }\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    }\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 }], { initialState: [{
+  `, 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: 1723 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1772 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map