@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

@@ -14,7 +14,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../services/ai-instrumentation.service";
 import * as i2 from "@memberjunction/ng-shared";
 import * as i3 from "@angular/forms";
-import * as i4 from "@progress/kendo-angular-layout";
+import * as i4 from "angular-split";
 import * as i5 from "@memberjunction/ng-shared-generic";
 import * as i6 from "./widgets/kpi-card.component";
 import * as i7 from "./charts/time-series-chart.component";
@@ -27,12 +27,12 @@ const _forTrack1 = ($index, $item) => $item.id;
 const _forTrack2 = ($index, $item) => $item.model;
 function ExecutionMonitoringComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "mj-loading", 51);
+    i0.ɵɵelement(1, "mj-loading", 48);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-kpi-card", 52);
+    i0.ɵɵelementStart(0, "app-kpi-card", 49);
     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) {
@@ -42,52 +42,52 @@ function ExecutionMonitoringComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("data", kpi_r2);
 } }
 function ExecutionMonitoringComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 53)(2, "div", 54);
-    i0.ɵɵelement(3, "i", 55);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 50)(2, "div", 51);
+    i0.ɵɵelement(3, "i", 52);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
+    i0.ɵɵelementStart(4, "div", 53)(5, "div", 54);
     i0.ɵɵtext(6, "Success Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵelementStart(7, "div", 55);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 59);
+    i0.ɵɵelementStart(9, "div", 56);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 53)(12, "div", 60);
-    i0.ɵɵelement(13, "i", 61);
+    i0.ɵɵelementStart(11, "div", 50)(12, "div", 57);
+    i0.ɵɵelement(13, "i", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 56)(15, "div", 57);
+    i0.ɵɵelementStart(14, "div", 53)(15, "div", 54);
     i0.ɵɵtext(16, "Error Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 58);
+    i0.ɵɵelementStart(17, "div", 55);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 59);
+    i0.ɵɵelementStart(19, "div", 56);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 53)(22, "div", 62);
-    i0.ɵɵelement(23, "i", 63);
+    i0.ɵɵelementStart(21, "div", 50)(22, "div", 59);
+    i0.ɵɵelement(23, "i", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
+    i0.ɵɵelementStart(24, "div", 53)(25, "div", 54);
     i0.ɵɵtext(26, "Avg Response Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 58);
+    i0.ɵɵelementStart(27, "div", 55);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 59);
+    i0.ɵɵelementStart(29, "div", 56);
     i0.ɵɵtext(30, "Across all models");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 53)(32, "div", 64);
-    i0.ɵɵelement(33, "i", 48);
+    i0.ɵɵelementStart(31, "div", 50)(32, "div", 61);
+    i0.ɵɵelement(33, "i", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
+    i0.ɵɵelementStart(34, "div", 53)(35, "div", 54);
     i0.ɵɵtext(36, "Active Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 58);
+    i0.ɵɵelementStart(37, "div", 55);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 59);
+    i0.ɵɵelementStart(39, "div", 56);
     i0.ɵɵtext(40, "Currently running");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -108,19 +108,19 @@ function ExecutionMonitoringComponent_Conditional_39_Template(rf, ctx) { if (rf
 } }
 function ExecutionMonitoringComponent_For_46_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 68);
+    i0.ɵɵelementStart(0, "button", 65);
     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", 69);
+    i0.ɵɵelement(1, "i", 66);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_For_46_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelementStart(0, "div", 62);
     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", 66);
+    i0.ɵɵelementStart(1, "span", 63);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ExecutionMonitoringComponent_For_46_Conditional_3_Template, 2, 0, "button", 67);
+    i0.ɵɵconditionalCreate(3, ExecutionMonitoringComponent_For_46_Conditional_3_Template, 2, 0, "button", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r6 = ctx.$implicit;
@@ -133,7 +133,7 @@ function ExecutionMonitoringComponent_For_46_Template(rf, ctx) { if (rf & 1) {
 } }
 function ExecutionMonitoringComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "app-time-series-chart", 70);
+    i0.ɵɵelementStart(0, "div", 32)(1, "app-time-series-chart", 67);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵlistener("dataPointClick", function ExecutionMonitoringComponent_Conditional_48_Template_app_time_series_chart_dataPointClick_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDataPointClick($event)); })("timeRangeChange", function ExecutionMonitoringComponent_Conditional_48_Template_app_time_series_chart_timeRangeChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onChartTimeRangeChange($event)); });
     i0.ɵɵelementEnd()();
@@ -143,7 +143,7 @@ function ExecutionMonitoringComponent_Conditional_48_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("data", i0.ɵɵpipeBind1(2, 2, ctx_r2.trends$) ?? i0.ɵɵpureFunction0(4, _c0))("config", ctx_r2.timeSeriesConfig);
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelementStart(0, "span", 71);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -152,7 +152,7 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedTimestamp(ctx_r2.activeTab));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵelementStart(0, "span", 72);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -161,36 +161,36 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r2.getFormattedMetricLabel(ctx_r2.activeTab));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵelement(1, "mj-loading", 79);
+    i0.ɵɵelementStart(0, "div", 73);
+    i0.ɵɵelement(1, "mj-loading", 76);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelementStart(0, "div", 80);
     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", 84)(2, "span", 85);
+    i0.ɵɵelementStart(1, "div", 81)(2, "span", 82);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 84);
+    i0.ɵɵelementStart(4, "div", 81);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 84);
+    i0.ɵɵelementStart(6, "div", 81);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 84)(9, "span", 86);
+    i0.ɵɵelementStart(8, "div", 81)(9, "span", 83);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 84);
+    i0.ɵɵelementStart(11, "div", 81);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 84);
+    i0.ɵɵelementStart(13, "div", 81);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 84);
+    i0.ɵɵelementStart(15, "div", 81);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 84);
+    i0.ɵɵelementStart(17, "div", 81);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -218,31 +218,31 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Templa
     i0.ɵɵtextInterpolate(ctx_r2.formatTime(execution_r10.startTime));
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77)(1, "div", 80)(2, "div", 81);
+    i0.ɵɵelementStart(0, "div", 74)(1, "div", 77)(2, "div", 78);
     i0.ɵɵtext(3, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 81);
+    i0.ɵɵelementStart(4, "div", 78);
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 81);
+    i0.ɵɵelementStart(6, "div", 78);
     i0.ɵɵtext(7, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 81);
+    i0.ɵɵelementStart(8, "div", 78);
     i0.ɵɵtext(9, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 81);
+    i0.ɵɵelementStart(10, "div", 78);
     i0.ɵɵtext(11, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 81);
+    i0.ɵɵelementStart(12, "div", 78);
     i0.ɵɵtext(13, "Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 81);
+    i0.ɵɵelementStart(14, "div", 78);
     i0.ɵɵtext(15, "Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 81);
+    i0.ɵɵelementStart(16, "div", 78);
     i0.ɵɵtext(17, "Time");
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template, 19, 12, "div", 82, _forTrack1);
+    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_49_Conditional_9_For_19_Template, 19, 12, "div", 79, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -250,22 +250,22 @@ function ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template(rf,
     i0.ɵɵrepeater(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data);
 } }
 function ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No executions found for this time period");
     i0.ɵɵelementEnd()();
 } }
 function ExecutionMonitoringComponent_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 71)(2, "h4");
-    i0.ɵɵelement(3, "i", 72);
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 68)(2, "h4");
+    i0.ɵɵelement(3, "i", 69);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 73);
-    i0.ɵɵconditionalCreate(6, ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template, 2, 1, "span", 74);
-    i0.ɵɵconditionalCreate(7, ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template, 2, 1, "span", 75);
+    i0.ɵɵelementStart(5, "div", 70);
+    i0.ɵɵconditionalCreate(6, ExecutionMonitoringComponent_Conditional_49_Conditional_6_Template, 2, 1, "span", 71);
+    i0.ɵɵconditionalCreate(7, ExecutionMonitoringComponent_Conditional_49_Conditional_7_Template, 2, 1, "span", 72);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template, 2, 0, "div", 76)(9, ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template, 20, 0, "div", 77)(10, ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template, 4, 0, "div", 78);
+    i0.ɵɵconditionalCreate(8, ExecutionMonitoringComponent_Conditional_49_Conditional_8_Template, 2, 0, "div", 73)(9, ExecutionMonitoringComponent_Conditional_49_Conditional_9_Template, 20, 0, "div", 74)(10, ExecutionMonitoringComponent_Conditional_49_Conditional_10_Template, 4, 0, "div", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -279,12 +279,12 @@ function ExecutionMonitoringComponent_Conditional_49_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 8 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.length) > 0 ? 9 : 10);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵelement(1, "mj-loading", 90);
+    i0.ɵɵelementStart(0, "div", 73);
+    i0.ɵɵelement(1, "mj-loading", 87);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "h5");
+    i0.ɵɵelementStart(0, "div", 91)(1, "h5");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
@@ -296,43 +296,43 @@ function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_3
     i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "div", 91)(2, "div", 92)(3, "label");
+    i0.ɵɵelementStart(0, "div", 86)(1, "div", 88)(2, "div", 89)(3, "label");
     i0.ɵɵtext(4, "Model Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 92)(8, "label");
+    i0.ɵɵelementStart(7, "div", 89)(8, "label");
     i0.ɵɵtext(9, "Vendor:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 92)(13, "label");
+    i0.ɵɵelementStart(12, "div", 89)(13, "label");
     i0.ɵɵtext(14, "API Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 92)(18, "label");
+    i0.ɵɵelementStart(17, "div", 89)(18, "label");
     i0.ɵɵtext(19, "Input Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 92)(23, "label");
+    i0.ɵɵelementStart(22, "div", 89)(23, "label");
     i0.ɵɵtext(24, "Output Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(25, "span");
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 92)(28, "label");
+    i0.ɵɵelementStart(27, "div", 89)(28, "label");
     i0.ɵɵtext(29, "Active:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 93);
+    i0.ɵɵelementStart(30, "span", 90);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(32, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template, 5, 1, "div", 94);
+    i0.ɵɵconditionalCreate(32, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Conditional_32_Template, 5, 1, "div", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -354,11 +354,11 @@ function ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template(rf,
     i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description) ? 32 : -1);
 } }
 function ExecutionMonitoringComponent_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 71)(2, "h4");
-    i0.ɵɵelement(3, "i", 88);
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 68)(2, "h4");
+    i0.ɵɵelement(3, "i", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template, 2, 0, "div", 76)(6, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template, 33, 9, "div", 89);
+    i0.ɵɵconditionalCreate(5, ExecutionMonitoringComponent_Conditional_50_Conditional_5_Template, 2, 0, "div", 73)(6, ExecutionMonitoringComponent_Conditional_50_Conditional_6_Template, 33, 9, "div", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -368,16 +368,16 @@ function ExecutionMonitoringComponent_Conditional_50_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 5 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data) ? 6 : -1);
 } }
 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.ɵɵelementStart(0, "div", 93)(1, "div", 94)(2, "span", 95);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 99);
+    i0.ɵɵelementStart(4, "span", 96);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 100);
-    i0.ɵɵelement(7, "div", 101);
+    i0.ɵɵelementStart(6, "div", 97);
+    i0.ɵɵelement(7, "div", 98);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 102);
+    i0.ɵɵelementStart(8, "div", 99);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -394,16 +394,16 @@ function ExecutionMonitoringComponent_Conditional_65_Conditional_1_For_2_Templat
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatTokens(item_r11.tokens), " tokens ");
 } }
 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.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_65_Conditional_1_For_2_Template, 10, 5, "div", 93, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx.slice(0, 8));
 } }
 function ExecutionMonitoringComponent_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_65_Conditional_1_Template, 3, 0, "div", 95);
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_65_Conditional_1_Template, 3, 0, "div", 92);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -413,22 +413,22 @@ function ExecutionMonitoringComponent_Conditional_65_Template(rf, ctx) { if (rf
     i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.costData$)) ? 1 : -1, tmp_1_0);
 } }
 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.ɵɵelementStart(0, "div", 101)(1, "div", 102)(2, "span", 95);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 106);
+    i0.ɵɵelementStart(4, "span", 103);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 107)(7, "div", 108);
-    i0.ɵɵelement(8, "div", 109)(9, "div", 110);
+    i0.ɵɵelementStart(6, "div", 104)(7, "div", 105);
+    i0.ɵɵelement(8, "div", 106)(9, "div", 107);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 111)(11, "span", 112);
+    i0.ɵɵelementStart(10, "div", 108)(11, "span", 109);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 113);
+    i0.ɵɵelementStart(13, "span", 110);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 114);
+    i0.ɵɵelementStart(15, "div", 111);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -450,16 +450,16 @@ function ExecutionMonitoringComponent_Conditional_72_Conditional_1_For_2_Templat
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatCostPerToken(item_r13.cost, item_r13.inputTokens + item_r13.outputTokens), " ");
 } }
 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.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_72_Conditional_1_For_2_Template, 17, 9, "div", 101, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx.slice(0, 6));
 } }
 function ExecutionMonitoringComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_72_Conditional_1_Template, 3, 0, "div", 103);
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_72_Conditional_1_Template, 3, 0, "div", 100);
     i0.ɵɵpipe(2, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -470,7 +470,7 @@ function ExecutionMonitoringComponent_Conditional_72_Template(rf, ctx) { if (rf
 } }
 function ExecutionMonitoringComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "app-live-execution-widget", 115);
+    i0.ɵɵelementStart(0, "div", 46)(1, "app-live-execution-widget", 112);
     i0.ɵɵpipe(2, "async");
     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()();
@@ -480,7 +480,7 @@ function ExecutionMonitoringComponent_Conditional_79_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("executions", i0.ɵɵpipeBind1(2, 1, ctx_r2.liveExecutions$) ?? i0.ɵɵpureFunction0(3, _c0));
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 128)(1, "label");
+    i0.ɵɵelementStart(0, "div", 125)(1, "label");
     i0.ɵɵtext(2, "Completed:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -493,7 +493,7 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.executionDetails.endTime, "medium"));
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 128)(1, "label");
+    i0.ɵɵelementStart(0, "div", 125)(1, "label");
     i0.ɵɵtext(2, "Model:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -505,10 +505,10 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_
     i0.ɵɵtextInterpolate(ctx_r2.executionDetails.model);
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 126)(1, "h4");
+    i0.ɵɵelementStart(0, "div", 123)(1, "h4");
     i0.ɵɵtext(2, "Error Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 129);
+    i0.ɵɵelementStart(3, "div", 126);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -517,16 +517,16 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_
     i0.ɵɵtextInterpolate(ctx_r2.executionDetails.errorMessage);
 } }
 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.ɵɵelementStart(0, "div", 128)(1, "div", 129)(2, "span", 130);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 134);
+    i0.ɵɵelementStart(4, "span", 131);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 135);
+    i0.ɵɵelementStart(6, "span", 132);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 136)(9, "span");
+    i0.ɵɵelementStart(8, "div", 133)(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "span");
@@ -549,11 +549,11 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_
     i0.ɵɵtextInterpolate1("", child_r16.tokens.toLocaleString(), " tokens");
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 126)(1, "h4");
+    i0.ɵɵelementStart(0, "div", 123)(1, "h4");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 130);
-    i0.ɵɵrepeaterCreate(4, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_For_5_Template, 13, 7, "div", 131, _forTrack1);
+    i0.ɵɵelementStart(3, "div", 127);
+    i0.ɵɵrepeaterCreate(4, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_For_5_Template, 13, 7, "div", 128, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -563,62 +563,62 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_
     i0.ɵɵrepeater(ctx_r2.executionDetails.children);
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 124)(1, "div", 126)(2, "h4");
+    i0.ɵɵelementStart(0, "div", 121)(1, "div", 123)(2, "h4");
     i0.ɵɵtext(3, "Basic Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 127)(5, "div", 128)(6, "label");
+    i0.ɵɵelementStart(4, "div", 124)(5, "div", 125)(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", 128)(12, "label");
+    i0.ɵɵelementStart(11, "div", 125)(12, "label");
     i0.ɵɵtext(13, "Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 128)(17, "label");
+    i0.ɵɵelementStart(16, "div", 125)(17, "label");
     i0.ɵɵtext(18, "Status:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 86);
+    i0.ɵɵelementStart(19, "span", 83);
     i0.ɵɵtext(20);
     i0.ɵɵpipe(21, "titlecase");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 128)(23, "label");
+    i0.ɵɵelementStart(22, "div", 125)(23, "label");
     i0.ɵɵtext(24, "Started:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(25, "span");
     i0.ɵɵtext(26);
     i0.ɵɵpipe(27, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(28, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_28_Template, 6, 4, "div", 128);
-    i0.ɵɵelementStart(29, "div", 128)(30, "label");
+    i0.ɵɵconditionalCreate(28, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_28_Template, 6, 4, "div", 125);
+    i0.ɵɵelementStart(29, "div", 125)(30, "label");
     i0.ɵɵtext(31, "Duration:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(32, "span");
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(34, "div", 126)(35, "h4");
+    i0.ɵɵelementStart(34, "div", 123)(35, "h4");
     i0.ɵɵtext(36, "Resource Usage");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 127)(38, "div", 128)(39, "label");
+    i0.ɵɵelementStart(37, "div", 124)(38, "div", 125)(39, "label");
     i0.ɵɵtext(40, "Cost:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(41, "span");
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 128)(44, "label");
+    i0.ɵɵelementStart(43, "div", 125)(44, "label");
     i0.ɵɵtext(45, "Tokens:");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(46, "span");
     i0.ɵɵtext(47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(48, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_48_Template, 5, 1, "div", 128);
+    i0.ɵɵconditionalCreate(48, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_48_Template, 5, 1, "div", 125);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(49, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_49_Template, 5, 1, "div", 126);
-    i0.ɵɵconditionalCreate(50, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_Template, 6, 1, "div", 126);
+    i0.ɵɵconditionalCreate(49, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_49_Template, 5, 1, "div", 123);
+    i0.ɵɵconditionalCreate(50, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Conditional_50_Template, 6, 1, "div", 123);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -648,31 +648,31 @@ function ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template(rf,
     i0.ɵɵconditional(ctx_r2.executionDetails.children.length > 0 ? 50 : -1);
 } }
 function ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵelement(1, "mj-loading", 137);
+    i0.ɵɵelementStart(0, "div", 122);
+    i0.ɵɵelement(1, "mj-loading", 134);
     i0.ɵɵelementEnd();
 } }
 function ExecutionMonitoringComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 116);
+    i0.ɵɵelementStart(0, "div", 113);
     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.ɵɵelementStart(1, "div", 114);
     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.ɵɵelementStart(2, "div", 115)(3, "h3");
     i0.ɵɵtext(4, "Execution Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 119)(6, "button", 120);
+    i0.ɵɵelementStart(5, "div", 116)(6, "button", 117);
     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.ɵɵelement(7, "i", 118);
     i0.ɵɵtext(8, " Open ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 122);
+    i0.ɵɵelementStart(9, "button", 119);
     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", 69);
+    i0.ɵɵelement(10, "i", 66);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 123);
-    i0.ɵɵconditionalCreate(12, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template, 51, 20, "div", 124);
-    i0.ɵɵconditionalCreate(13, ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template, 2, 0, "div", 125);
+    i0.ɵɵelementStart(11, "div", 120);
+    i0.ɵɵconditionalCreate(12, ExecutionMonitoringComponent_Conditional_80_Conditional_12_Template, 51, 20, "div", 121);
+    i0.ɵɵconditionalCreate(13, ExecutionMonitoringComponent_Conditional_80_Conditional_13_Template, 2, 0, "div", 122);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1346,7 +1346,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
         return 'fa-solid fa-chart-line';
     }
     static ɵfac = function ExecutionMonitoringComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i1.AIInstrumentationService), i0.ɵɵdirectiveInject(i2.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 81, vars: 50, consts: [[1, "execution-monitoring"], [1, "loading-overlay"], [1, "monitoring-header"], [1, "monitoring-title"], [1, "fa-solid", "fa-chart-line"], [1, "monitoring-controls"], [1, "time-range-control"], [3, "ngModelChange", "change", "ngModel", "disabled"], ["value", "1h"], ["value", "6h"], ["value", "24h"], ["value", "7d"], ["value", "30d"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "kpi-dashboard"], [1, "kpi-grid"], [3, "data", "clickable"], ["orientation", "vertical", 1, "dashboard-splitter", 3, "layoutChange"], ["size", "45%", 3, "resizable", "collapsible"], ["orientation", "horizontal", 3, "layoutChange"], ["size", "30%", 3, "resizable", "collapsible", "collapsed"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [3, "resizable", "collapsible"], [1, "dashboard-section", "drill-down-container"], [1, "drill-down-tabs"], [1, "tab-header"], [1, "tab-item", 3, "active"], [1, "tab-content"], [1, "tab-pane", "trends-chart"], [1, "tab-pane", "executions-drill-down"], [1, "tab-pane", "model-detail"], ["size", "50%", 3, "resizable", "collapsible"], [1, "dashboard-section", "performance-matrix"], ["title", "Agent vs Model Performance", 3, "data", "config"], [1, "dashboard-section", "analysis-panels"], [1, "analysis-panel"], [1, "panel-header", 3, "click"], [1, "panel-title"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "panel-toggle-icon"], [1, "panel-content"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-bolt"], [1, "panel-content", "live-executions-panel"], [1, "execution-modal"], ["text", "Loading dashboard data...", "size", "large"], [3, "click", "data"], [1, "status-metric"], [1, "status-icon", "status-icon--success"], [1, "fa-solid", "fa-check"], [1, "status-info"], [1, "status-label"], [1, "status-value"], [1, "status-subtitle"], [1, "status-icon", "status-icon--warning"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "status-icon", "status-icon--info"], [1, "fa-solid", "fa-clock"], [1, "status-icon", "status-icon--primary"], [1, "tab-item", 3, "click"], [1, "tab-title"], ["title", "Close tab", 1, "tab-close"], ["title", "Close tab", 1, "tab-close", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Execution Trends", 3, "dataPointClick", "timeRangeChange", "data", "config"], [1, "drill-down-header"], [1, "fa-solid", "fa-list"], [1, "drill-down-meta"], [1, "timestamp"], [1, "metric-badge"], [1, "loading-spinner"], [1, "executions-table"], [1, "no-data"], ["text", "Loading execution details...", "size", "small"], [1, "table-header"], [1, "header-cell"], [1, "table-row"], [1, "table-row", 3, "click"], [1, "table-cell"], [1, "type-badge"], [1, "status-badge"], [1, "fa-solid", "fa-inbox"], [1, "fa-solid", "fa-microchip"], [1, "model-details"], ["text", "Loading model details...", "size", "small"], [1, "model-info-grid"], [1, "info-item"], [1, "status-indicator"], [1, "model-description"], [1, "cost-bars"], [1, "cost-bar-item"], [1, "cost-bar-info"], [1, "model-name"], [1, "cost-value"], [1, "cost-bar-container"], [1, "cost-bar"], [1, "token-info"], [1, "efficiency-items"], [1, "efficiency-item"], [1, "efficiency-header"], [1, "efficiency-ratio"], [1, "token-breakdown"], [1, "token-bar"], [1, "token-segment", "token-segment--input"], [1, "token-segment", "token-segment--output"], [1, "token-labels"], [1, "input-label"], [1, "output-label"], [1, "cost-per-token"], [3, "executionClick", "executions"], [1, "execution-modal", 3, "click"], [1, "execution-modal-content", 3, "click"], [1, "execution-modal-header"], [1, "modal-header-actions"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "execution-modal-body"], [1, "execution-details"], [1, "loading-details"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "error-message"], [1, "child-executions"], [1, "child-execution"], [1, "child-info"], [1, "child-name"], [1, "child-type"], [1, "child-status"], [1, "child-metrics"], ["text", "Loading execution details...", "size", "medium"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 81, vars: 43, consts: [[1, "execution-monitoring"], [1, "loading-overlay"], [1, "monitoring-header"], [1, "monitoring-title"], [1, "fa-solid", "fa-chart-line"], [1, "monitoring-controls"], [1, "time-range-control"], [3, "ngModelChange", "change", "ngModel", "disabled"], ["value", "1h"], ["value", "6h"], ["value", "24h"], ["value", "7d"], ["value", "30d"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "kpi-dashboard"], [1, "kpi-grid"], [3, "data", "clickable"], ["direction", "vertical", 1, "dashboard-splitter"], [3, "size"], ["direction", "horizontal"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [1, "dashboard-section", "drill-down-container"], [1, "drill-down-tabs"], [1, "tab-header"], [1, "tab-item", 3, "active"], [1, "tab-content"], [1, "tab-pane", "trends-chart"], [1, "tab-pane", "executions-drill-down"], [1, "tab-pane", "model-detail"], [1, "dashboard-section", "performance-matrix"], ["title", "Agent vs Model Performance", 3, "data", "config"], [1, "dashboard-section", "analysis-panels"], [1, "analysis-panel"], [1, "panel-header", 3, "click"], [1, "panel-title"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "panel-toggle-icon"], [1, "panel-content"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-bolt"], [1, "panel-content", "live-executions-panel"], [1, "execution-modal"], ["text", "Loading dashboard data...", "size", "large"], [3, "click", "data"], [1, "status-metric"], [1, "status-icon", "status-icon--success"], [1, "fa-solid", "fa-check"], [1, "status-info"], [1, "status-label"], [1, "status-value"], [1, "status-subtitle"], [1, "status-icon", "status-icon--warning"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "status-icon", "status-icon--info"], [1, "fa-solid", "fa-clock"], [1, "status-icon", "status-icon--primary"], [1, "tab-item", 3, "click"], [1, "tab-title"], ["title", "Close tab", 1, "tab-close"], ["title", "Close tab", 1, "tab-close", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Execution Trends", 3, "dataPointClick", "timeRangeChange", "data", "config"], [1, "drill-down-header"], [1, "fa-solid", "fa-list"], [1, "drill-down-meta"], [1, "timestamp"], [1, "metric-badge"], [1, "loading-spinner"], [1, "executions-table"], [1, "no-data"], ["text", "Loading execution details...", "size", "small"], [1, "table-header"], [1, "header-cell"], [1, "table-row"], [1, "table-row", 3, "click"], [1, "table-cell"], [1, "type-badge"], [1, "status-badge"], [1, "fa-solid", "fa-inbox"], [1, "fa-solid", "fa-microchip"], [1, "model-details"], ["text", "Loading model details...", "size", "small"], [1, "model-info-grid"], [1, "info-item"], [1, "status-indicator"], [1, "model-description"], [1, "cost-bars"], [1, "cost-bar-item"], [1, "cost-bar-info"], [1, "model-name"], [1, "cost-value"], [1, "cost-bar-container"], [1, "cost-bar"], [1, "token-info"], [1, "efficiency-items"], [1, "efficiency-item"], [1, "efficiency-header"], [1, "efficiency-ratio"], [1, "token-breakdown"], [1, "token-bar"], [1, "token-segment", "token-segment--input"], [1, "token-segment", "token-segment--output"], [1, "token-labels"], [1, "input-label"], [1, "output-label"], [1, "cost-per-token"], [3, "executionClick", "executions"], [1, "execution-modal", 3, "click"], [1, "execution-modal-content", 3, "click"], [1, "execution-modal-header"], [1, "modal-header-actions"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "execution-modal-body"], [1, "execution-details"], [1, "loading-details"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "error-message"], [1, "child-executions"], [1, "child-execution"], [1, "child-info"], [1, "child-name"], [1, "child-type"], [1, "child-status"], [1, "child-metrics"], ["text", "Loading execution details...", "size", "medium"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, ExecutionMonitoringComponent_Conditional_1_Template, 2, 0, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "h2", 3);
@@ -1383,65 +1383,59 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵrepeaterCreate(26, ExecutionMonitoringComponent_For_27_Template, 1, 3, "app-kpi-card", 17, _forTrack0);
             i0.ɵɵpipe(28, "async");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(29, "as-split", 18)(30, "as-split-area", 19)(31, "as-split", 20)(32, "as-split-area", 19)(33, "div", 21)(34, "div", 22)(35, "div", 23)(36, "h4", 24);
+            i0.ɵɵelement(37, "i", 25);
             i0.ɵɵtext(38, " System Health ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(39, ExecutionMonitoringComponent_Conditional_39_Template, 41, 6, "div", 27);
+            i0.ɵɵconditionalCreate(39, ExecutionMonitoringComponent_Conditional_39_Template, 41, 6, "div", 26);
             i0.ɵɵpipe(40, "async");
             i0.ɵɵelementEnd()()();
-            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.ɵɵelementStart(41, "as-split-area", 19)(42, "div", 27)(43, "div", 28)(44, "div", 29);
+            i0.ɵɵrepeaterCreate(45, ExecutionMonitoringComponent_For_46_Template, 4, 4, "div", 30, _forTrack1);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "div", 33);
-            i0.ɵɵconditionalCreate(48, ExecutionMonitoringComponent_Conditional_48_Template, 3, 5, "div", 34);
-            i0.ɵɵconditionalCreate(49, ExecutionMonitoringComponent_Conditional_49_Template, 11, 4, "div", 35);
-            i0.ɵɵconditionalCreate(50, ExecutionMonitoringComponent_Conditional_50_Template, 7, 2, "div", 36);
+            i0.ɵɵelementStart(47, "div", 31);
+            i0.ɵɵconditionalCreate(48, ExecutionMonitoringComponent_Conditional_48_Template, 3, 5, "div", 32);
+            i0.ɵɵconditionalCreate(49, ExecutionMonitoringComponent_Conditional_49_Template, 11, 4, "div", 33);
+            i0.ɵɵconditionalCreate(50, ExecutionMonitoringComponent_Conditional_50_Template, 7, 2, "div", 34);
             i0.ɵɵelementEnd()()()()()();
-            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.ɵɵelementStart(51, "as-split-area", 19)(52, "as-split", 20)(53, "as-split-area", 19)(54, "div", 35);
+            i0.ɵɵelement(55, "app-performance-heatmap", 36);
             i0.ɵɵpipe(56, "async");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(57, "kendo-splitter-pane", 28)(58, "div", 40)(59, "div", 41)(60, "div", 42);
+            i0.ɵɵelementStart(57, "as-split-area", 19)(58, "div", 37)(59, "div", 38)(60, "div", 39);
             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.ɵɵelementStart(61, "span", 40);
+            i0.ɵɵelement(62, "i", 41);
             i0.ɵɵtext(63, " Cost Analysis ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(64, "i", 45);
+            i0.ɵɵelement(64, "i", 42);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(65, ExecutionMonitoringComponent_Conditional_65_Template, 3, 3, "div", 46);
+            i0.ɵɵconditionalCreate(65, ExecutionMonitoringComponent_Conditional_65_Template, 3, 3, "div", 43);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(66, "div", 41)(67, "div", 42);
+            i0.ɵɵelementStart(66, "div", 38)(67, "div", 39);
             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.ɵɵelementStart(68, "span", 40);
+            i0.ɵɵelement(69, "i", 44);
             i0.ɵɵtext(70, " Token Efficiency ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(71, "i", 45);
+            i0.ɵɵelement(71, "i", 42);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(72, ExecutionMonitoringComponent_Conditional_72_Template, 3, 3, "div", 46);
+            i0.ɵɵconditionalCreate(72, ExecutionMonitoringComponent_Conditional_72_Template, 3, 3, "div", 43);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(73, "div", 41)(74, "div", 42);
+            i0.ɵɵelementStart(73, "div", 38)(74, "div", 39);
             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.ɵɵelementStart(75, "span", 40);
+            i0.ɵɵelement(76, "i", 45);
             i0.ɵɵtext(77, " Live Executions ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(78, "i", 45);
+            i0.ɵɵelement(78, "i", 42);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(79, ExecutionMonitoringComponent_Conditional_79_Template, 3, 4, "div", 49);
+            i0.ɵɵconditionalCreate(79, ExecutionMonitoringComponent_Conditional_79_Template, 3, 4, "div", 46);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵconditionalCreate(80, ExecutionMonitoringComponent_Conditional_80_Template, 14, 2, "div", 50);
+            i0.ɵɵconditionalCreate(80, ExecutionMonitoringComponent_Conditional_80_Template, 14, 2, "div", 47);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            let tmp_12_0;
+            let tmp_9_0;
             i0.ɵɵclassProp("loading", ctx.isLoading);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
@@ -1453,15 +1447,15 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵadvance();
             i0.ɵɵclassProp("spinning", ctx.isLoading);
             i0.ɵɵadvance(4);
-            i0.ɵɵrepeater(i0.ɵɵpipeBind1(28, 43, ctx.kpiCards$));
+            i0.ɵɵrepeater(i0.ɵɵpipeBind1(28, 36, ctx.kpiCards$));
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵproperty("size", 45);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("resizable", true)("collapsible", true)("collapsed", false);
+            i0.ɵɵproperty("size", 30);
             i0.ɵɵadvance(7);
-            i0.ɵɵconditional((tmp_12_0 = i0.ɵɵpipeBind1(40, 45, ctx.kpis$)) ? 39 : -1, tmp_12_0);
+            i0.ɵɵconditional((tmp_9_0 = i0.ɵɵpipeBind1(40, 38, ctx.kpis$)) ? 39 : -1, tmp_9_0);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵproperty("size", 70);
             i0.ɵɵadvance(4);
             i0.ɵɵrepeater(ctx.drillDownTabs);
             i0.ɵɵadvance(3);
@@ -1471,13 +1465,13 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵadvance();
             i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "model-detail" ? 50 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵproperty("size", 55);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵproperty("size", 50);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("data", i0.ɵɵpipeBind1(56, 47, ctx.performanceMatrix$) ?? i0.ɵɵpureFunction0(49, _c0))("config", ctx.heatmapConfig);
+            i0.ɵɵproperty("data", i0.ɵɵpipeBind1(56, 40, ctx.performanceMatrix$) ?? i0.ɵɵpureFunction0(42, _c0))("config", ctx.heatmapConfig);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵproperty("size", 50);
             i0.ɵɵadvance(7);
             i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.cost)("fa-chevron-up", ctx.panelStates.cost);
             i0.ɵɵadvance();
@@ -1492,7 +1486,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
             i0.ɵɵconditional(ctx.panelStates.executions ? 79 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.selectedExecution ? 80 : -1);
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitterComponent, i4.SplitterPaneComponent, i5.LoadingComponent, i6.KPICardComponent, i7.TimeSeriesChartComponent, i8.LiveExecutionWidgetComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .loading-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    \n\n    [_nghost-%COMP%]     .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: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .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: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.SplitComponent, i4.SplitAreaComponent, i5.LoadingComponent, i6.KPICardComponent, i7.TimeSeriesChartComponent, i8.LiveExecutionWidgetComponent, i9.PerformanceHeatmapComponent, i10.AsyncPipe, i10.TitleCasePipe, i10.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading[_ngcontent-%COMP%] {\n      overflow: hidden;\n    }\n\n    \n\n    .loading-overlay[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    \n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]   option[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    \n\n    [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n      overflow: hidden;\n      padding: 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 400px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        min-height: 350px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     as-split-area > .as-split-area-content {\n        padding: 5px;\n      }\n\n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"], changeDetection: 0 });
 };
 ExecutionMonitoringComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'AIMonitorResource')
@@ -1548,12 +1542,12 @@ export { ExecutionMonitoringComponent };
       </div>
 
       <!-- Main Dashboard with Kendo Splitter -->
-      <kendo-splitter class="dashboard-splitter" orientation="vertical" (layoutChange)="onSplitterLayoutChange($event)">
+      <as-split direction="vertical" class="dashboard-splitter">
         <!-- Top Row: System Health and Trends Chart -->
-        <kendo-splitter-pane size="45%" [resizable]="true" [collapsible]="false">
-          <kendo-splitter orientation="horizontal" (layoutChange)="onSplitterLayoutChange($event)">
+        <as-split-area [size]="45">
+          <as-split direction="horizontal">
             <!-- System Health -->
-            <kendo-splitter-pane size="30%" [resizable]="true" [collapsible]="true" [collapsed]="false">
+            <as-split-area [size]="30">
               <div class="dashboard-section system-status">
                 <div class="status-container">
                   <div class="chart-header">
@@ -1611,10 +1605,10 @@ export { ExecutionMonitoringComponent };
                   }
                 </div>
               </div>
-            </kendo-splitter-pane>
-            
+            </as-split-area>
+
             <!-- Drill-down Tab Container -->
-            <kendo-splitter-pane [resizable]="true" [collapsible]="false">
+            <as-split-area [size]="70">
               <div class="dashboard-section drill-down-container">
                 <div class="drill-down-tabs">
                   <div class="tab-header">
@@ -1774,15 +1768,15 @@ export { ExecutionMonitoringComponent };
                   </div>
                 </div>
               </div>
-            </kendo-splitter-pane>
-          </kendo-splitter>
-        </kendo-splitter-pane>
+            </as-split-area>
+          </as-split>
+        </as-split-area>
 
         <!-- Bottom Row: Analysis Panels with Expansion Layout -->
-        <kendo-splitter-pane [resizable]="true" [collapsible]="false">
-          <kendo-splitter orientation="horizontal" (layoutChange)="onSplitterLayoutChange($event)">
+        <as-split-area [size]="55">
+          <as-split direction="horizontal">
             <!-- Left: Performance Heatmap -->
-            <kendo-splitter-pane size="50%" [resizable]="true" [collapsible]="false">
+            <as-split-area [size]="50">
               <div class="dashboard-section performance-matrix">
                 <app-performance-heatmap
                   [data]="(performanceMatrix$ | async) ?? []"
@@ -1790,10 +1784,10 @@ export { ExecutionMonitoringComponent };
                   [config]="heatmapConfig"
                 ></app-performance-heatmap>
               </div>
-            </kendo-splitter-pane>
+            </as-split-area>
 
             <!-- Right: Analysis Panels with Collapsible Sections -->
-            <kendo-splitter-pane [resizable]="true" [collapsible]="false">
+            <as-split-area [size]="50">
               <div class="dashboard-section analysis-panels">
                 
                 <!-- Cost Analysis Panel -->
@@ -1899,10 +1893,10 @@ export { ExecutionMonitoringComponent };
                   }
                 </div>
               </div>
-            </kendo-splitter-pane>
-          </kendo-splitter>
-        </kendo-splitter-pane>
-      </kendo-splitter>
+            </as-split-area>
+          </as-split>
+        </as-split-area>
+      </as-split>
 
       <!-- Execution Details Modal -->
       @if (selectedExecution) {
@@ -2019,7 +2013,7 @@ export { ExecutionMonitoringComponent };
         </div>
       }
     </div>
-  `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading {\n      overflow: hidden;\n    }\n\n    /* Loading Overlay */\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    /* === Dashboard Header - Clean White Style === */\n    .monitoring-header {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control select:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control select:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control select option {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      padding: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    /* Ensure splitter 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: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        min-height: 400px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        min-height: 350px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep .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: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
+  `, styles: ["\n    .execution-monitoring {\n      padding: 0;\n      background: var(--mj-bg-surface-card);\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-monitoring.loading {\n      overflow: hidden;\n    }\n\n    /* Loading Overlay */\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: color-mix(in srgb, var(--mj-bg-surface) 70%, transparent);\n      z-index: 999;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(4px);\n    }\n\n    /* === Dashboard Header - Clean White Style === */\n    .monitoring-header {\n      background: var(--mj-bg-surface);\n      padding: 16px 24px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n      border-bottom: 1px solid var(--mj-border-default);\n      position: relative;\n      z-index: 10;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: var(--mj-brand-primary);\n      font-size: 22px;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n    }\n\n    .time-range-control label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .time-range-control select {\n      padding: 8px 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-range-control select:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .time-range-control select:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .time-range-control select:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .time-range-control select option {\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .refresh-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      padding: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      flex: 1;\n      min-height: 500px;\n      margin: 0 20px 20px 20px;\n    }\n\n    .dashboard-section {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .dashboard-section:hover {\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    /* Ensure splitter areas take full height */\n    :host ::ng-deep as-split-area > .as-split-area-content {\n      overflow: hidden;\n      padding: 10px;\n    }\n\n    /* Cost Analysis Styles */\n    .cost-chart-container, .efficiency-chart-container, .status-container {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      margin-bottom: 16px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: var(--mj-brand-primary);\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: var(--mj-brand-primary);\n      border-radius: 4px;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      border-radius: 4px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .token-segment--input {\n      background: var(--mj-brand-primary);\n    }\n\n    .token-segment--output {\n      background: var(--mj-brand-accent);\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .input-label {\n      color: var(--mj-brand-primary);\n      font-weight: 500;\n    }\n\n    .output-label {\n      color: var(--mj-brand-accent);\n      font-weight: 500;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-icon--warning {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .status-icon--info {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-icon--primary {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: var(--mj-text-disabled);\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 8px 16px;\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .open-record-btn:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      border-bottom: 1px solid var(--mj-border-default);\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .status-badge--running {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .status-badge--failed {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .error-message {\n      background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: var(--mj-status-error);\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: var(--mj-bg-surface-card);\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: var(--mj-border-default);\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: var(--mj-text-muted);\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n      background: var(--mj-bg-surface-card);\n      min-height: 44px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      background: transparent;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .tab-item.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      border-bottom-color: var(--mj-brand-primary);\n      font-weight: 600;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: var(--mj-text-primary);\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      padding: 4px 10px;\n      border-radius: 6px;\n      font-weight: 600;\n      box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: var(--mj-text-muted);\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: var(--mj-bg-surface-card);\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: var(--mj-text-primary);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: color-mix(in srgb, var(--mj-text-muted) 10%, var(--mj-bg-surface));\n      color: var(--mj-text-muted);\n      padding: 3px 8px;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .type-badge--prompt {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .type-badge--agent {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: var(--mj-text-disabled);\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: var(--mj-border-default);\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: var(--mj-status-success);\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 12px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      background: var(--mj-bg-surface);\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .analysis-panel:hover {\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-card);\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: var(--mj-brand-primary);\n      width: 18px;\n    }\n\n    .panel-toggle-icon {\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .panel-content {\n      padding: 18px;\n      border-top: 1px solid color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n      animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        min-height: 400px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        min-height: 350px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep as-split-area > .as-split-area-content {\n        padding: 5px;\n      }\n\n      .tab-header {\n        overflow-x: auto;\n      }\n      \n      .tab-item {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: var(--mj-text-muted);\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
     }], () => [{ type: i1.AIInstrumentationService }, { type: i2.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1786 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1767 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map