@memberjunction/ng-dashboards 2.47.0 → 2.49.0

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

@@ -1,30 +1,2042 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { Subject } from 'rxjs';
+import { map, takeUntil, debounceTime } from 'rxjs/operators';
+import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
+import * as i1 from "../services/ai-instrumentation.service";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "./widgets/kpi-card.component";
+import * as i5 from "./widgets/live-execution-widget.component";
+import * as i6 from "./charts/time-series-chart.component";
+import * as i7 from "./charts/performance-heatmap.component";
+import * as i8 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.title;
+const _forTrack1 = ($index, $item) => $item.id;
+const _forTrack2 = ($index, $item) => $item.model;
+const _c0 = () => [];
+function ExecutionMonitoringComponent_For_40_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-kpi-card", 52);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_40_Template_app_kpi_card_click_0_listener() { const kpi_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onKpiClick(kpi_r2)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const kpi_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("clickable", ctx_r2.isKpiClickable(kpi_r2));
+    i0.ɵɵproperty("data", kpi_r2);
+} }
+function ExecutionMonitoringComponent_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 53)(2, "div", 54);
+    i0.ɵɵelement(3, "i", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 56)(5, "div", 57);
+    i0.ɵɵtext(6, "Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 59);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 53)(12, "div", 60);
+    i0.ɵɵelement(13, "i", 61);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 56)(15, "div", 57);
+    i0.ɵɵtext(16, "Error Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 58);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 59);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(21, "div", 53)(22, "div", 62);
+    i0.ɵɵelement(23, "i", 63);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
+    i0.ɵɵtext(26, "Avg Response Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "div", 58);
+    i0.ɵɵtext(28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "div", 59);
+    i0.ɵɵtext(30, "Across all models");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(31, "div", 53)(32, "div", 64);
+    i0.ɵɵelement(33, "i", 49);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
+    i0.ɵɵtext(36, "Active Executions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "div", 58);
+    i0.ɵɵtext(38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "div", 59);
+    i0.ɵɵtext(40, "Currently running");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const kpis_r4 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1("", (kpis_r4.successRate * 100).toFixed(1), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Last ", ctx_r2.selectedTimeRange, "");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1("", (kpis_r4.errorRate * 100).toFixed(1), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", kpis_r4.totalExecutions, " total executions");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1("", (kpis_r4.avgExecutionTime / 1000).toFixed(2), "s");
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(kpis_r4.activeExecutions);
+} }
+function ExecutionMonitoringComponent_For_59_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 68);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_59_Conditional_3_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const tab_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeTab($event, tab_r6.id)); });
+    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelementEnd();
+} }
+function ExecutionMonitoringComponent_For_59_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_For_59_Template_div_click_0_listener() { const tab_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectTab(tab_r6.id)); });
+    i0.ɵɵelementStart(1, "span", 66);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, ExecutionMonitoringComponent_For_59_Conditional_3_Template, 2, 0, "button", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", ctx_r2.activeTabId === tab_r6.id);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(tab_r6.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r6.closeable ? 3 : -1);
+} }
+function ExecutionMonitoringComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "app-time-series-chart", 70);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵlistener("dataPointClick", function ExecutionMonitoringComponent_Conditional_61_Template_app_time_series_chart_dataPointClick_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDataPointClick($event)); })("timeRangeChange", function ExecutionMonitoringComponent_Conditional_61_Template_app_time_series_chart_timeRangeChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onChartTimeRangeChange($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", (tmp_1_0 = i0.ɵɵpipeBind1(2, 2, ctx_r2.trends$)) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(4, _c0))("config", ctx_r2.timeSeriesConfig);
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.getFormattedTimestamp(ctx_r2.activeTab));
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.getFormattedMetricLabel(ctx_r2.activeTab));
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵtext(2, " Loading execution details... ");
+    i0.ɵɵelementEnd();
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Template_div_click_0_listener() { const execution_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.viewExecutionDetail(execution_r10)); });
+    i0.ɵɵelementStart(1, "div", 84)(2, "span", 85);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 84);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 84);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 84)(9, "span", 86);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 84);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 84);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 84);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 84);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const execution_r10 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("type-badge--" + execution_r10.type);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", execution_r10.type, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(execution_r10.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(execution_r10.model || "N/A");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("status-badge--" + execution_r10.status);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", execution_r10.status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(execution_r10.duration));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.formatCurrency(execution_r10.cost));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(execution_r10.tokens.toLocaleString());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.formatTime(execution_r10.startTime));
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "div", 80)(2, "div", 81);
+    i0.ɵɵtext(3, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 81);
+    i0.ɵɵtext(5, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 81);
+    i0.ɵɵtext(7, "Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 81);
+    i0.ɵɵtext(9, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 81);
+    i0.ɵɵtext(11, "Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 81);
+    i0.ɵɵtext(13, "Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 81);
+    i0.ɵɵtext(15, "Tokens");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 81);
+    i0.ɵɵtext(17, "Time");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(18, ExecutionMonitoringComponent_Conditional_62_Conditional_9_For_19_Template, 19, 12, "div", 82, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(18);
+    i0.ɵɵrepeater(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data);
+} }
+function ExecutionMonitoringComponent_Conditional_62_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No executions found for this time period");
+    i0.ɵɵelementEnd()();
+} }
+function ExecutionMonitoringComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 71)(2, "h4");
+    i0.ɵɵelement(3, "i", 72);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 73);
+    i0.ɵɵtemplate(6, ExecutionMonitoringComponent_Conditional_62_Conditional_6_Template, 2, 1, "span", 74)(7, ExecutionMonitoringComponent_Conditional_62_Conditional_7_Template, 2, 1, "span", 75);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, ExecutionMonitoringComponent_Conditional_62_Conditional_8_Template, 3, 0, "div", 76)(9, ExecutionMonitoringComponent_Conditional_62_Conditional_9_Template, 20, 0, "div", 77)(10, ExecutionMonitoringComponent_Conditional_62_Conditional_10_Template, 4, 0, "div", 78);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.activeTab == null ? null : ctx_r2.activeTab.title, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.timestamp) ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.metric) ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 8 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.length) > 0 ? 9 : 10);
+} }
+function ExecutionMonitoringComponent_Conditional_63_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵtext(2, " Loading model details... ");
+    i0.ɵɵelementEnd();
+} }
+function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 93)(1, "h5");
+    i0.ɵɵtext(2, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description);
+} }
+function ExecutionMonitoringComponent_Conditional_63_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90)(2, "div", 91)(3, "label");
+    i0.ɵɵtext(4, "Model Name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 91)(8, "label");
+    i0.ɵɵtext(9, "Vendor:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 91)(13, "label");
+    i0.ɵɵtext(14, "API Name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 91)(18, "label");
+    i0.ɵɵtext(19, "Input Cost:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 91)(23, "label");
+    i0.ɵɵtext(24, "Output Cost:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span");
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "div", 91)(28, "label");
+    i0.ɵɵtext(29, "Active:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 92);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(32, ExecutionMonitoringComponent_Conditional_63_Conditional_6_Conditional_32_Template, 5, 1, "div", 93);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.name);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.vendor);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.apiName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("$", (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.inputTokenCost == null ? null : ctx_r2.activeTab.data.inputTokenCost.toFixed(6)) || "0", " per token");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("$", (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.outputTokenCost == null ? null : ctx_r2.activeTab.data.outputTokenCost.toFixed(6)) || "0", " per token");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.isActive);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.isActive) ? "Yes" : "No", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.description) ? 32 : -1);
+} }
+function ExecutionMonitoringComponent_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 71)(2, "h4");
+    i0.ɵɵelement(3, "i", 88);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(5, ExecutionMonitoringComponent_Conditional_63_Conditional_5_Template, 3, 0, "div", 76)(6, ExecutionMonitoringComponent_Conditional_63_Conditional_6_Template, 33, 9, "div", 89);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" Model Details: ", ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data == null ? null : ctx_r2.activeTab.data.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.loadingDrillDown ? 5 : (ctx_r2.activeTab == null ? null : ctx_r2.activeTab.data) ? 6 : -1);
+} }
+function ExecutionMonitoringComponent_Conditional_78_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96)(2, "span", 97);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 98);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 99);
+    i0.ɵɵelement(7, "div", 100);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 101);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r11 = ctx.$implicit;
+    const costData_r12 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r11.model);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.formatCurrency(item_r11.cost));
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r2.getCostBarWidth(item_r11.cost, ctx_r2.getMaxCost(costData_r12)), "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatTokens(item_r11.tokens), " tokens ");
+} }
+function ExecutionMonitoringComponent_Conditional_78_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_78_Conditional_1_For_2_Template, 10, 5, "div", 95, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx.slice(0, 8));
+} }
+function ExecutionMonitoringComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_78_Conditional_1_Template, 3, 0, "div", 94);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.costData$)) ? 1 : -1, tmp_1_0);
+} }
+function ExecutionMonitoringComponent_Conditional_85_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103)(1, "div", 104)(2, "span", 97);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 105);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 106)(7, "div", 107);
+    i0.ɵɵelement(8, "div", 108)(9, "div", 109);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 110)(11, "span", 111);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 112);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 113);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r13 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r13.model);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getTokenRatio(item_r13.inputTokens, item_r13.outputTokens), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("width", ctx_r2.getTokenPercentage(item_r13.inputTokens, item_r13.inputTokens + item_r13.outputTokens), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r2.getTokenPercentage(item_r13.outputTokens, item_r13.inputTokens + item_r13.outputTokens), "%");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Input: ", ctx_r2.formatTokens(item_r13.inputTokens), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Output: ", ctx_r2.formatTokens(item_r13.outputTokens), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.formatCostPerToken(item_r13.cost, item_r13.inputTokens + item_r13.outputTokens), " ");
+} }
+function ExecutionMonitoringComponent_Conditional_85_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵrepeaterCreate(1, ExecutionMonitoringComponent_Conditional_85_Conditional_1_For_2_Template, 17, 9, "div", 103, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx.slice(0, 6));
+} }
+function ExecutionMonitoringComponent_Conditional_85_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵtemplate(1, ExecutionMonitoringComponent_Conditional_85_Conditional_1_Template, 3, 0, "div", 102);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.tokenEfficiency$)) ? 1 : -1, tmp_1_0);
+} }
+function ExecutionMonitoringComponent_Conditional_92_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 50)(1, "app-live-execution-widget", 114);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵlistener("executionClick", function ExecutionMonitoringComponent_Conditional_92_Template_app_live_execution_widget_executionClick_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExecutionClick($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("executions", (tmp_1_0 = i0.ɵɵpipeBind1(2, 1, ctx_r2.liveExecutions$)) !== null && tmp_1_0 !== undefined ? tmp_1_0 : i0.ɵɵpureFunction0(3, _c0));
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127)(1, "label");
+    i0.ɵɵtext(2, "Completed:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r2.executionDetails.endTime, "medium"));
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127)(1, "label");
+    i0.ɵɵtext(2, "Model:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.executionDetails.model);
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 125)(1, "h4");
+    i0.ɵɵtext(2, "Error Information");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 128);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.executionDetails.errorMessage);
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130)(1, "div", 131)(2, "span", 132);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 133);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 134);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 135)(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const child_r16 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(child_r16.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(child_r16.type);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("status-badge--" + child_r16.status);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", child_r16.status, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.formatCurrency(child_r16.cost));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", child_r16.tokens.toLocaleString(), " tokens");
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 125)(1, "h4");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 129);
+    i0.ɵɵrepeaterCreate(4, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_For_5_Template, 13, 7, "div", 130, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Child Executions (", ctx_r2.executionDetails.children.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.executionDetails.children);
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123)(1, "div", 125)(2, "h4");
+    i0.ɵɵtext(3, "Basic Information");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 126)(5, "div", 127)(6, "label");
+    i0.ɵɵtext(7, "Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "titlecase");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 127)(12, "label");
+    i0.ɵɵtext(13, "Name:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 127)(17, "label");
+    i0.ɵɵtext(18, "Status:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span", 86);
+    i0.ɵɵtext(20);
+    i0.ɵɵpipe(21, "titlecase");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 127)(23, "label");
+    i0.ɵɵtext(24, "Started:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span");
+    i0.ɵɵtext(26);
+    i0.ɵɵpipe(27, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(28, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_28_Template, 6, 4, "div", 127);
+    i0.ɵɵelementStart(29, "div", 127)(30, "label");
+    i0.ɵɵtext(31, "Duration:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "span");
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(34, "div", 125)(35, "h4");
+    i0.ɵɵtext(36, "Resource Usage");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "div", 126)(38, "div", 127)(39, "label");
+    i0.ɵɵtext(40, "Cost:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(41, "span");
+    i0.ɵɵtext(42);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(43, "div", 127)(44, "label");
+    i0.ɵɵtext(45, "Tokens:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(46, "span");
+    i0.ɵɵtext(47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(48, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_48_Template, 5, 1, "div", 127);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(49, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_49_Template, 5, 1, "div", 125)(50, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Conditional_50_Template, 6, 1, "div", 125);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 13, ctx_r2.executionDetails.type));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.executionDetails.name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap("status-badge--" + ctx_r2.executionDetails.status);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 15, ctx_r2.executionDetails.status), " ");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(27, 17, ctx_r2.executionDetails.startTime, "medium"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.executionDetails.endTime ? 28 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(ctx_r2.getDuration(ctx_r2.executionDetails)));
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r2.formatCurrency(ctx_r2.executionDetails.cost, 6));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.executionDetails.tokens.toLocaleString());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.executionDetails.model ? 48 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.executionDetails.errorMessage ? 49 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.executionDetails.children.length > 0 ? 50 : -1);
+} }
+function ExecutionMonitoringComponent_Conditional_93_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵelement(1, "div", 136);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Loading execution details...");
+    i0.ɵɵelementEnd()();
+} }
+function ExecutionMonitoringComponent_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 115);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
+    i0.ɵɵelementStart(1, "div", 116);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 117)(3, "h3");
+    i0.ɵɵtext(4, "Execution Details");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 118)(6, "button", 119);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openFullRecord()); });
+    i0.ɵɵelement(7, "i", 120);
+    i0.ɵɵtext(8, " Open ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 121);
+    i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Conditional_93_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeExecutionModal()); });
+    i0.ɵɵelement(10, "i", 69);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 122);
+    i0.ɵɵtemplate(12, ExecutionMonitoringComponent_Conditional_93_Conditional_12_Template, 51, 20, "div", 123)(13, ExecutionMonitoringComponent_Conditional_93_Conditional_13_Template, 4, 0, "div", 124);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(12);
+    i0.ɵɵconditional(ctx_r2.executionDetails ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.loadingExecutionDetails ? 13 : -1);
+} }
 export class ExecutionMonitoringComponent {
-    constructor() {
-        this.openEntityRecord = new EventEmitter();
+    instrumentationService;
+    initialState;
+    openEntityRecord = new EventEmitter();
+    stateChange = new EventEmitter();
+    destroy$ = new Subject();
+    stateChangeSubject$ = new Subject();
+    // Configuration
+    refreshInterval = 30000; // 30 seconds
+    selectedTimeRange = '24h';
+    isLoading = false;
+    // Chart configurations
+    timeSeriesConfig = {
+        showGrid: true,
+        showTooltip: true,
+        animationDuration: 500,
+        useDualAxis: true
+    };
+    heatmapConfig = {
+        height: 350,
+        showTooltip: true,
+        animationDuration: 300
+    };
+    // Data streams
+    kpis$;
+    trends$;
+    liveExecutions$;
+    chartData$;
+    // Derived data streams
+    kpiCards$;
+    performanceMatrix$;
+    costData$;
+    tokenEfficiency$;
+    // Modal state
+    selectedExecution = null;
+    executionDetails = null;
+    loadingExecutionDetails = false;
+    // Drill-down tab state
+    drillDownTabs = [];
+    activeTabId = 'main-chart';
+    loadingDrillDown = false;
+    // Panel state for collapsible sections
+    panelStates = {
+        cost: true,
+        efficiency: true, // Expanded by default
+        executions: false
+    };
+    get activeTab() {
+        return this.drillDownTabs.find(tab => tab.id === this.activeTabId);
     }
-    onOpenEntityRecord(entityName, recordId) {
-        this.openEntityRecord.emit({ entityName, recordId });
+    constructor(instrumentationService) {
+        this.instrumentationService = instrumentationService;
+        // Initialize data streams
+        this.kpis$ = this.instrumentationService.kpis$;
+        this.trends$ = this.instrumentationService.trends$;
+        this.liveExecutions$ = this.instrumentationService.liveExecutions$;
+        this.chartData$ = this.instrumentationService.chartData$;
+        // Derived streams
+        this.kpiCards$ = this.kpis$.pipe(map(kpis => this.createKPICards(kpis)));
+        this.performanceMatrix$ = this.chartData$.pipe(map(data => data.performanceMatrix.map(item => ({
+            agent: item.agent,
+            model: item.model,
+            avgTime: item.avgTime,
+            successRate: item.successRate
+        }))));
+        this.costData$ = this.chartData$.pipe(map(data => data.costByModel));
+        this.tokenEfficiency$ = this.chartData$.pipe(map(data => data.tokenEfficiency));
     }
+    ngOnInit() {
+        // Load initial state if provided
+        if (this.initialState) {
+            this.loadUserState(this.initialState);
+        }
+        else {
+            // Default initialization
+            this.instrumentationService.setRefreshInterval(this.refreshInterval);
+            this.setTimeRange(this.selectedTimeRange);
+            // Initialize with main chart tab
+            this.drillDownTabs = [
+                {
+                    id: 'main-chart',
+                    title: 'Execution Trends',
+                    type: 'chart',
+                    closeable: false
+                }
+            ];
+        }
+        // Set up debounced state change emission
+        this.stateChangeSubject$.pipe(debounceTime(2000), // 2 second debounce
+        takeUntil(this.destroy$)).subscribe(state => {
+            this.stateChange.emit(state);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.stateChangeSubject$.complete();
+    }
+    getCurrentState() {
+        return {
+            selectedTimeRange: this.selectedTimeRange,
+            refreshInterval: this.refreshInterval,
+            panelStates: { ...this.panelStates },
+            drillDownTabs: this.drillDownTabs.map(tab => ({
+                id: tab.id,
+                title: tab.title,
+                type: tab.type,
+                timestamp: tab.timestamp?.toISOString(),
+                metric: tab.metric
+            })),
+            activeTabId: this.activeTabId
+        };
+    }
+    emitStateChange() {
+        const currentState = this.getCurrentState();
+        this.stateChangeSubject$.next(currentState);
+    }
+    loadUserState(state) {
+        if (state.selectedTimeRange) {
+            this.selectedTimeRange = state.selectedTimeRange;
+            this.setTimeRange(state.selectedTimeRange);
+        }
+        if (state.refreshInterval !== undefined) {
+            this.refreshInterval = state.refreshInterval;
+            this.instrumentationService.setRefreshInterval(this.refreshInterval);
+        }
+        if (state.panelStates) {
+            // Only override if state has explicit panel states, otherwise keep defaults
+            this.panelStates = { ...this.panelStates, ...state.panelStates };
+        }
+        if (state.drillDownTabs && state.drillDownTabs.length > 0) {
+            this.drillDownTabs = state.drillDownTabs.map(tab => ({
+                ...tab,
+                type: tab.type,
+                timestamp: tab.timestamp ? new Date(tab.timestamp) : undefined,
+                closeable: tab.id !== 'main-chart'
+            }));
+        }
+        else {
+            // Initialize with default tab if not provided
+            this.drillDownTabs = [
+                {
+                    id: 'main-chart',
+                    title: 'Execution Trends',
+                    type: 'chart',
+                    closeable: false
+                }
+            ];
+        }
+        if (state.activeTabId) {
+            this.activeTabId = state.activeTabId;
+        }
+    }
+    createKPICards(kpis) {
+        return [
+            {
+                title: 'Total Executions',
+                value: kpis.totalExecutions,
+                icon: 'fa-chart-bar',
+                color: 'primary',
+                subtitle: `${kpis.activeExecutions} active`
+            },
+            {
+                title: 'Total Cost',
+                value: `$${kpis.totalCost.toFixed(4)}`,
+                icon: 'fa-dollar-sign',
+                color: 'warning',
+                subtitle: `${kpis.costCurrency} • $${kpis.dailyCostBurn.toFixed(2)}/day`
+            },
+            {
+                title: 'Success Rate',
+                value: `${(kpis.successRate * 100).toFixed(1)}%`,
+                icon: 'fa-check-circle',
+                color: 'success',
+                subtitle: `${(kpis.errorRate * 100).toFixed(1)}% errors`
+            },
+            {
+                title: 'Avg Response Time',
+                value: `${(kpis.avgExecutionTime / 1000).toFixed(2)}s`,
+                icon: 'fa-clock',
+                color: 'info',
+                subtitle: 'All models average'
+            },
+            {
+                title: 'Token Usage',
+                value: this.formatTokens(kpis.totalTokens),
+                icon: 'fa-coins',
+                color: 'primary',
+                subtitle: `$${kpis.costPerToken.toFixed(6)}/token`
+            },
+            {
+                title: 'Top Model',
+                value: kpis.topModel,
+                icon: 'fa-microchip',
+                color: 'info',
+                subtitle: 'Most used'
+            }
+        ];
+    }
+    onRefreshIntervalChange() {
+        this.instrumentationService.setRefreshInterval(this.refreshInterval);
+        this.emitStateChange();
+    }
+    onTimeRangeChange() {
+        this.setTimeRange(this.selectedTimeRange);
+        this.emitStateChange();
+    }
+    setTimeRange(range) {
+        const now = new Date();
+        let start;
+        switch (range) {
+            case '1h':
+                start = new Date(now.getTime() - 60 * 60 * 1000);
+                break;
+            case '6h':
+                start = new Date(now.getTime() - 6 * 60 * 60 * 1000);
+                break;
+            case '24h':
+                start = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+                break;
+            case '7d':
+                start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+                break;
+            case '30d':
+                start = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+                break;
+            default:
+                start = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+        }
+        this.instrumentationService.setDateRange(start, now);
+    }
+    refreshData() {
+        this.isLoading = true;
+        // Force refresh by temporarily setting interval to 0 and back
+        const currentInterval = this.refreshInterval;
+        this.instrumentationService.setRefreshInterval(0);
+        setTimeout(() => {
+            this.instrumentationService.setRefreshInterval(currentInterval);
+            this.isLoading = false;
+        }, 100);
+    }
+    onExecutionClick(execution) {
+        this.selectedExecution = execution;
+        this.loadExecutionDetails(execution);
+    }
+    onDataPointClick(event) {
+        const timestamp = event.data.timestamp;
+        const metric = event.metric;
+        // Create new drill-down tab
+        const tabId = `drill-down-${timestamp.getTime()}-${metric}`;
+        const tabTitle = `${this.getMetricDisplayLabel(metric)} - ${this.formatTimestamp(timestamp)}`;
+        const newTab = {
+            id: tabId,
+            title: tabTitle,
+            type: 'executions',
+            timestamp: timestamp,
+            metric: metric,
+            closeable: true
+        };
+        // Add tab if it doesn't exist
+        if (!this.drillDownTabs.find(tab => tab.id === tabId)) {
+            this.drillDownTabs.push(newTab);
+            this.emitStateChange(); // Emit state when new tab is added
+        }
+        // Switch to the new tab
+        this.selectTab(tabId);
+        // Load drill-down data
+        this.loadDrillDownData(newTab);
+    }
+    onChartTimeRangeChange(range) {
+        this.selectedTimeRange = range;
+        this.setTimeRange(range);
+    }
+    getMetricValue(data, metric) {
+        switch (metric) {
+            case 'executions': return data.executions;
+            case 'cost': return data.cost;
+            case 'tokens': return data.tokens;
+            case 'avgTime': return data.avgTime;
+            case 'errors': return data.errors;
+            default: return 0;
+        }
+    }
+    formatMetricValue(metric, value) {
+        switch (metric) {
+            case 'executions': return value.toLocaleString();
+            case 'cost': return `$${value.toFixed(4)}`;
+            case 'tokens': return value.toLocaleString();
+            case 'avgTime': return `${(value / 1000).toFixed(1)}s`;
+            case 'errors': return value.toString();
+            default: return value.toString();
+        }
+    }
+    async loadExecutionDetails(execution) {
+        this.loadingExecutionDetails = true;
+        this.executionDetails = null;
+        try {
+            const details = await this.instrumentationService.getExecutionDetails(execution.id, execution.type);
+            this.executionDetails = details;
+        }
+        catch (error) {
+            console.error('Error loading execution details:', error);
+        }
+        finally {
+            this.loadingExecutionDetails = false;
+        }
+    }
+    closeExecutionModal() {
+        this.selectedExecution = null;
+        this.executionDetails = null;
+        this.loadingExecutionDetails = false;
+    }
+    openFullRecord() {
+        if (this.selectedExecution) {
+            // Determine the entity name based on the execution type
+            const entityName = this.selectedExecution.type === 'prompt'
+                ? 'MJ: AI Prompt Runs'
+                : 'MJ: AI Agent Runs';
+            // Emit the event to open the full record
+            this.openEntityRecord.emit({
+                entityName: entityName,
+                recordId: this.selectedExecution.id
+            });
+            // Close the modal
+            this.closeExecutionModal();
+        }
+    }
+    // Utility methods for templates
+    trackByKpiTitle(index, kpi) {
+        return kpi.title;
+    }
+    trackByCostModel(index, item) {
+        return item.model;
+    }
+    trackByEfficiencyModel(index, item) {
+        return item.model;
+    }
+    formatTokens(tokens) {
+        if (tokens >= 1000000) {
+            return `${(tokens / 1000000).toFixed(1)}M`;
+        }
+        else if (tokens >= 1000) {
+            return `${(tokens / 1000).toFixed(1)}K`;
+        }
+        return tokens.toString();
+    }
+    formatCurrency(amount, decimals = 4) {
+        return `$${amount.toFixed(decimals)}`;
+    }
+    formatCostPerToken(cost, tokens) {
+        const costPer1K = tokens > 0 ? (cost / tokens) * 1000 : 0;
+        return `$${costPer1K.toFixed(4)}/1K tokens`;
+    }
+    getCostBarWidth(cost, maxCost) {
+        return maxCost > 0 ? (cost / maxCost) * 100 : 0;
+    }
+    getMaxCost(costData) {
+        return Math.max(...costData.map(item => item.cost));
+    }
+    getTokenRatio(input, output) {
+        const total = input + output;
+        if (total === 0)
+            return '0:0';
+        const ratio = output / input;
+        return `1:${ratio.toFixed(1)}`;
+    }
+    getTokenPercentage(tokens, total) {
+        return total > 0 ? (tokens / total) * 100 : 0;
+    }
+    getCostPerToken(cost, tokens) {
+        const costPer1K = tokens > 0 ? (cost / tokens) * 1000 : 0;
+        return costPer1K.toFixed(4);
+    }
+    // Tab management methods
+    selectTab(tabId) {
+        this.activeTabId = tabId;
+        // Trigger chart resize after tab switch to fix chart rendering
+        setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 100);
+        this.emitStateChange();
+    }
+    closeTab(event, tabId) {
+        event.stopPropagation();
+        const tabIndex = this.drillDownTabs.findIndex(tab => tab.id === tabId);
+        if (tabIndex === -1)
+            return;
+        // Remove the tab
+        this.drillDownTabs.splice(tabIndex, 1);
+        // If we closed the active tab, switch to another tab
+        if (this.activeTabId === tabId) {
+            if (this.drillDownTabs.length > 0) {
+                // Switch to the previous tab or first tab
+                const newActiveIndex = Math.max(0, tabIndex - 1);
+                this.activeTabId = this.drillDownTabs[newActiveIndex].id;
+                // Trigger resize after tab switch
+                setTimeout(() => {
+                    window.dispatchEvent(new Event('resize'));
+                }, 100);
+            }
+            else {
+                // No tabs left, this shouldn't happen as main chart is not closeable
+                this.activeTabId = 'main-chart';
+            }
+        }
+        this.emitStateChange();
+    }
+    // KPI click handling
+    onKpiClick(kpi) {
+        if (kpi.title === 'Top Model' && kpi.value !== 'N/A') {
+            this.openModelDrillDown(String(kpi.value));
+        }
+        // Add other KPI drill-downs as needed
+    }
+    isKpiClickable(kpi) {
+        return kpi.title === 'Top Model' && kpi.value !== 'N/A';
+    }
+    async openModelDrillDown(modelName) {
+        const tabId = `model-detail-${modelName.replace(/[^a-zA-Z0-9]/g, '-')}`;
+        const tabTitle = `Model: ${modelName}`;
+        // Check if tab already exists
+        if (this.drillDownTabs.find(tab => tab.id === tabId)) {
+            this.selectTab(tabId);
+            return;
+        }
+        // Create new model detail tab
+        const newTab = {
+            id: tabId,
+            title: tabTitle,
+            type: 'model-detail',
+            closeable: true
+        };
+        this.drillDownTabs.push(newTab);
+        this.selectTab(tabId);
+        // Load model details
+        this.loadModelDetails(newTab, modelName);
+    }
+    async loadDrillDownData(tab) {
+        if (!tab.timestamp)
+            return;
+        this.loadingDrillDown = true;
+        try {
+            // Create time window around the clicked point (±30 minutes)
+            const startTime = new Date(tab.timestamp.getTime() - 30 * 60 * 1000);
+            const endTime = new Date(tab.timestamp.getTime() + 30 * 60 * 1000);
+            // Load executions for this time period
+            const [promptResults, agentResults] = await Promise.all([
+                new RunView().RunView({
+                    EntityName: 'MJ: AI Prompt Runs',
+                    ExtraFilter: `RunAt >= '${startTime.toISOString()}' AND RunAt <= '${endTime.toISOString()}'`,
+                    OrderBy: 'RunAt DESC',
+                    ResultType: 'entity_object'
+                }),
+                new RunView().RunView({
+                    EntityName: 'MJ: AI Agent Runs',
+                    ExtraFilter: `StartedAt >= '${startTime.toISOString()}' AND StartedAt <= '${endTime.toISOString()}'`,
+                    OrderBy: 'StartedAt DESC',
+                    ResultType: 'entity_object'
+                })
+            ]);
+            // Convert to ExecutionRecord format
+            const executions = [];
+            // Add prompt executions
+            for (const run of promptResults.Results) {
+                const duration = run.CompletedAt ?
+                    new Date(run.CompletedAt).getTime() - new Date(run.RunAt).getTime() :
+                    Date.now() - new Date(run.RunAt).getTime();
+                executions.push({
+                    id: run.ID,
+                    type: 'prompt',
+                    name: await this.getPromptName(run.PromptID),
+                    model: run.ModelID ? await this.getModelName(run.ModelID) : undefined,
+                    status: run.Success ? 'completed' : (run.Success === false ? 'failed' : 'running'),
+                    startTime: new Date(run.RunAt),
+                    endTime: run.CompletedAt ? new Date(run.CompletedAt) : undefined,
+                    duration: duration,
+                    cost: run.Cost || 0,
+                    tokens: run.TokensUsed || 0,
+                    errorMessage: run.ErrorMessage || undefined
+                });
+            }
+            // Add agent executions
+            for (const run of agentResults.Results) {
+                const duration = run.CompletedAt ?
+                    new Date(run.CompletedAt).getTime() - new Date(run.StartedAt).getTime() :
+                    Date.now() - new Date(run.StartedAt).getTime();
+                executions.push({
+                    id: run.ID,
+                    type: 'agent',
+                    name: await this.getAgentName(run.AgentID),
+                    status: run.Status.toLowerCase(),
+                    startTime: new Date(run.StartedAt),
+                    endTime: run.CompletedAt ? new Date(run.CompletedAt) : undefined,
+                    duration: duration,
+                    cost: run.TotalCost || 0,
+                    tokens: run.TotalTokensUsed || 0,
+                    errorMessage: run.ErrorMessage || undefined
+                });
+            }
+            // Sort by start time (most recent first)
+            executions.sort((a, b) => b.startTime.getTime() - a.startTime.getTime());
+            // Update tab data
+            tab.data = executions;
+        }
+        catch (error) {
+            console.error('Error loading drill-down data:', error);
+            tab.data = [];
+        }
+        finally {
+            this.loadingDrillDown = false;
+        }
+    }
+    async loadModelDetails(tab, modelName) {
+        this.loadingDrillDown = true;
+        try {
+            // Find model by name
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Models',
+                ExtraFilter: `Name = '${modelName.replace(/'/g, "''")}'`,
+                ResultType: 'entity_object'
+            });
+            const model = result.Results[0];
+            if (model) {
+                tab.data = {
+                    name: model.Name,
+                    vendor: model.Vendor,
+                    apiName: model.APIName,
+                    inputTokenCost: 0, // Not available in current model
+                    outputTokenCost: 0, // Not available in current model  
+                    isActive: model.IsActive,
+                    description: model.Description
+                };
+            }
+            else {
+                tab.data = null;
+            }
+        }
+        catch (error) {
+            console.error('Error loading model details:', error);
+            tab.data = null;
+        }
+        finally {
+            this.loadingDrillDown = false;
+        }
+    }
+    // Helper methods for drill-down
+    async getPromptName(promptId) {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Prompts',
+                ExtraFilter: `ID = '${promptId}'`,
+                ResultType: 'entity_object'
+            });
+            return result.Results[0]?.Name || 'Unknown Prompt';
+        }
+        catch {
+            return 'Unknown Prompt';
+        }
+    }
+    async getAgentName(agentId) {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Agents',
+                ExtraFilter: `ID = '${agentId}'`,
+                ResultType: 'entity_object'
+            });
+            return result.Results[0]?.Name || 'Unknown Agent';
+        }
+        catch {
+            return 'Unknown Agent';
+        }
+    }
+    async getModelName(modelId) {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Models',
+                ExtraFilter: `ID = '${modelId}'`,
+                ResultType: 'entity_object'
+            });
+            return result.Results[0]?.Name || 'Unknown Model';
+        }
+        catch {
+            return 'Unknown Model';
+        }
+    }
+    formatTimestamp(timestamp) {
+        return timestamp.toLocaleString();
+    }
+    formatTime(time) {
+        return time.toLocaleTimeString();
+    }
+    getMetricDisplayLabel(metric) {
+        const labels = {
+            executions: 'Executions',
+            cost: 'Cost',
+            tokens: 'Tokens',
+            avgTime: 'Avg Time',
+            errors: 'Errors'
+        };
+        return labels[metric] || metric;
+    }
+    getFormattedTimestamp(tab) {
+        return tab?.timestamp ? this.formatTimestamp(tab.timestamp) : '';
+    }
+    getFormattedMetricLabel(tab) {
+        return tab?.metric ? this.getMetricDisplayLabel(tab.metric) : '';
+    }
+    // Panel management methods
+    togglePanel(panelName) {
+        this.panelStates[panelName] = !this.panelStates[panelName];
+        this.emitStateChange();
+    }
+    viewExecutionDetail(execution) {
+        // Convert ExecutionRecord to LiveExecution format for the modal
+        const liveExecution = {
+            id: execution.id,
+            type: execution.type,
+            name: execution.name,
+            status: execution.status,
+            startTime: execution.startTime,
+            duration: execution.duration,
+            cost: execution.cost,
+            tokens: execution.tokens
+        };
+        this.onExecutionClick(liveExecution);
+    }
+    formatDuration(milliseconds) {
+        const seconds = Math.floor(milliseconds / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        if (hours > 0) {
+            return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+        }
+        else if (minutes > 0) {
+            return `${minutes}m ${seconds % 60}s`;
+        }
+        else {
+            return `${seconds}s`;
+        }
+    }
+    getDuration(details) {
+        const start = details.startTime.getTime();
+        const end = details.endTime ? details.endTime.getTime() : Date.now();
+        return end - start;
+    }
+    onSplitterLayoutChange(event) {
+        // Trigger window resize event to force charts to recalculate dimensions
+        setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 100);
+        // Emit state change when splitter changes
+        this.emitStateChange();
+    }
+    static ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(i0.ɵɵdirectiveInject(i1.AIInstrumentationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], inputs: { initialState: "initialState" }, outputs: { openEntityRecord: "openEntityRecord", stateChange: "stateChange" }, decls: 94, vars: 52, consts: [[1, "execution-monitoring"], [1, "monitoring-header"], [1, "monitoring-title"], [1, "fa-solid", "fa-chart-line"], [1, "monitoring-controls"], [1, "refresh-control"], [3, "ngModelChange", "change", "ngModel"], [3, "value"], [1, "time-range-control"], ["value", "1h"], ["value", "6h"], ["value", "24h"], ["value", "7d"], ["value", "30d"], [1, "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "kpi-dashboard"], [1, "kpi-grid"], [3, "data", "clickable"], ["orientation", "vertical", 1, "dashboard-splitter", 3, "layoutChange"], ["size", "45%", 3, "resizable", "collapsible"], ["orientation", "horizontal", 3, "layoutChange"], ["size", "30%", 3, "resizable", "collapsible", "collapsed"], [1, "dashboard-section", "system-status"], [1, "status-container"], [1, "chart-header"], [1, "chart-title"], [1, "fa-solid", "fa-heartbeat"], [1, "status-metrics"], [3, "resizable", "collapsible"], [1, "dashboard-section", "drill-down-container"], [1, "drill-down-tabs"], [1, "tab-header"], [1, "tab-item", 3, "active"], [1, "tab-content"], [1, "tab-pane", "trends-chart"], [1, "tab-pane", "executions-drill-down"], [1, "tab-pane", "model-detail"], ["size", "50%", 3, "resizable", "collapsible"], [1, "dashboard-section", "performance-matrix"], ["title", "Agent vs Model Performance", 3, "data", "config"], [1, "dashboard-section", "analysis-panels"], [1, "analysis-panel"], [1, "panel-header", 3, "click"], [1, "panel-title"], [1, "fa-solid", "fa-dollar-sign"], [1, "fa-solid", "panel-toggle-icon"], [1, "panel-content"], [1, "fa-solid", "fa-chart-pie"], [1, "fa-solid", "fa-bolt"], [1, "panel-content", "live-executions-panel"], [1, "execution-modal"], [3, "click", "data"], [1, "status-metric"], [1, "status-icon", "status-icon--success"], [1, "fa-solid", "fa-check"], [1, "status-info"], [1, "status-label"], [1, "status-value"], [1, "status-subtitle"], [1, "status-icon", "status-icon--warning"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "status-icon", "status-icon--info"], [1, "fa-solid", "fa-clock"], [1, "status-icon", "status-icon--primary"], [1, "tab-item", 3, "click"], [1, "tab-title"], ["title", "Close tab", 1, "tab-close"], ["title", "Close tab", 1, "tab-close", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Execution Trends", 3, "dataPointClick", "timeRangeChange", "data", "config"], [1, "drill-down-header"], [1, "fa-solid", "fa-list"], [1, "drill-down-meta"], [1, "timestamp"], [1, "metric-badge"], [1, "loading-spinner"], [1, "executions-table"], [1, "no-data"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "table-header"], [1, "header-cell"], [1, "table-row"], [1, "table-row", 3, "click"], [1, "table-cell"], [1, "type-badge"], [1, "status-badge"], [1, "fa-solid", "fa-inbox"], [1, "fa-solid", "fa-microchip"], [1, "model-details"], [1, "model-info-grid"], [1, "info-item"], [1, "status-indicator"], [1, "model-description"], [1, "cost-bars"], [1, "cost-bar-item"], [1, "cost-bar-info"], [1, "model-name"], [1, "cost-value"], [1, "cost-bar-container"], [1, "cost-bar"], [1, "token-info"], [1, "efficiency-items"], [1, "efficiency-item"], [1, "efficiency-header"], [1, "efficiency-ratio"], [1, "token-breakdown"], [1, "token-bar"], [1, "token-segment", "token-segment--input"], [1, "token-segment", "token-segment--output"], [1, "token-labels"], [1, "input-label"], [1, "output-label"], [1, "cost-per-token"], [3, "executionClick", "executions"], [1, "execution-modal", 3, "click"], [1, "execution-modal-content", 3, "click"], [1, "execution-modal-header"], [1, "modal-header-actions"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "execution-modal-body"], [1, "execution-details"], [1, "loading-details"], [1, "detail-section"], [1, "detail-grid"], [1, "detail-item"], [1, "error-message"], [1, "child-executions"], [1, "child-execution"], [1, "child-info"], [1, "child-name"], [1, "child-type"], [1, "child-status"], [1, "child-metrics"], [1, "spinner"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " AI Execution Monitoring ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 4)(6, "div", 5)(7, "label");
+            i0.ɵɵtext(8, "Refresh:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "select", 6);
+            i0.ɵɵtwoWayListener("ngModelChange", function ExecutionMonitoringComponent_Template_select_ngModelChange_9_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.refreshInterval, $event) || (ctx.refreshInterval = $event); return $event; });
+            i0.ɵɵlistener("change", function ExecutionMonitoringComponent_Template_select_change_9_listener() { return ctx.onRefreshIntervalChange(); });
+            i0.ɵɵelementStart(10, "option", 7);
+            i0.ɵɵtext(11, "Manual");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "option", 7);
+            i0.ɵɵtext(13, "10s");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "option", 7);
+            i0.ɵɵtext(15, "30s");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "option", 7);
+            i0.ɵɵtext(17, "1m");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "option", 7);
+            i0.ɵɵtext(19, "5m");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 8)(21, "label");
+            i0.ɵɵtext(22, "Time Range:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "select", 6);
+            i0.ɵɵtwoWayListener("ngModelChange", function ExecutionMonitoringComponent_Template_select_ngModelChange_23_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedTimeRange, $event) || (ctx.selectedTimeRange = $event); return $event; });
+            i0.ɵɵlistener("change", function ExecutionMonitoringComponent_Template_select_change_23_listener() { return ctx.onTimeRangeChange(); });
+            i0.ɵɵelementStart(24, "option", 9);
+            i0.ɵɵtext(25, "Last Hour");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "option", 10);
+            i0.ɵɵtext(27, "Last 6 Hours");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "option", 11);
+            i0.ɵɵtext(29, "Last 24 Hours");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "option", 12);
+            i0.ɵɵtext(31, "Last 7 Days");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "option", 13);
+            i0.ɵɵtext(33, "Last 30 Days");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(34, "button", 14);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_button_click_34_listener() { return ctx.refreshData(); });
+            i0.ɵɵelement(35, "i", 15);
+            i0.ɵɵtext(36, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(37, "div", 16)(38, "div", 17);
+            i0.ɵɵrepeaterCreate(39, ExecutionMonitoringComponent_For_40_Template, 1, 3, "app-kpi-card", 18, _forTrack0);
+            i0.ɵɵpipe(41, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(42, "kendo-splitter", 19);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_42_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(43, "kendo-splitter-pane", 20)(44, "kendo-splitter", 21);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_44_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(45, "kendo-splitter-pane", 22)(46, "div", 23)(47, "div", 24)(48, "div", 25)(49, "h4", 26);
+            i0.ɵɵelement(50, "i", 27);
+            i0.ɵɵtext(51, " System Health ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(52, ExecutionMonitoringComponent_Conditional_52_Template, 41, 6, "div", 28);
+            i0.ɵɵpipe(53, "async");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(54, "kendo-splitter-pane", 29)(55, "div", 30)(56, "div", 31)(57, "div", 32);
+            i0.ɵɵrepeaterCreate(58, ExecutionMonitoringComponent_For_59_Template, 4, 4, "div", 33, _forTrack1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(60, "div", 34);
+            i0.ɵɵtemplate(61, ExecutionMonitoringComponent_Conditional_61_Template, 3, 5, "div", 35)(62, ExecutionMonitoringComponent_Conditional_62_Template, 11, 4, "div", 36)(63, ExecutionMonitoringComponent_Conditional_63_Template, 7, 2, "div", 37);
+            i0.ɵɵelementEnd()()()()()();
+            i0.ɵɵelementStart(64, "kendo-splitter-pane", 29)(65, "kendo-splitter", 21);
+            i0.ɵɵlistener("layoutChange", function ExecutionMonitoringComponent_Template_kendo_splitter_layoutChange_65_listener($event) { return ctx.onSplitterLayoutChange($event); });
+            i0.ɵɵelementStart(66, "kendo-splitter-pane", 38)(67, "div", 39);
+            i0.ɵɵelement(68, "app-performance-heatmap", 40);
+            i0.ɵɵpipe(69, "async");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(70, "kendo-splitter-pane", 29)(71, "div", 41)(72, "div", 42)(73, "div", 43);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_73_listener() { return ctx.togglePanel("cost"); });
+            i0.ɵɵelementStart(74, "span", 44);
+            i0.ɵɵelement(75, "i", 45);
+            i0.ɵɵtext(76, " Cost Analysis ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(77, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(78, ExecutionMonitoringComponent_Conditional_78_Template, 3, 3, "div", 47);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(79, "div", 42)(80, "div", 43);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_80_listener() { return ctx.togglePanel("efficiency"); });
+            i0.ɵɵelementStart(81, "span", 44);
+            i0.ɵɵelement(82, "i", 48);
+            i0.ɵɵtext(83, " Token Efficiency ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(84, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(85, ExecutionMonitoringComponent_Conditional_85_Template, 3, 3, "div", 47);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(86, "div", 42)(87, "div", 43);
+            i0.ɵɵlistener("click", function ExecutionMonitoringComponent_Template_div_click_87_listener() { return ctx.togglePanel("executions"); });
+            i0.ɵɵelementStart(88, "span", 44);
+            i0.ɵɵelement(89, "i", 49);
+            i0.ɵɵtext(90, " Live Executions ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(91, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(92, ExecutionMonitoringComponent_Conditional_92_Template, 3, 4, "div", 50);
+            i0.ɵɵelementEnd()()()()()();
+            i0.ɵɵtemplate(93, ExecutionMonitoringComponent_Conditional_93_Template, 14, 2, "div", 51);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_15_0;
+            let tmp_26_0;
+            i0.ɵɵadvance(9);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.refreshInterval);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", 0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", 10000);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", 30000);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", 60000);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", 300000);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedTimeRange);
+            i0.ɵɵadvance(11);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("spinning", ctx.isLoading);
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(i0.ɵɵpipeBind1(41, 45, ctx.kpiCards$));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("resizable", true)("collapsible", true)("collapsed", false);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional((tmp_15_0 = i0.ɵɵpipeBind1(53, 47, ctx.kpis$)) ? 52 : -1, tmp_15_0);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.drillDownTabs);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "chart" ? 61 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "executions" ? 62 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.activeTab == null ? null : ctx.activeTab.type) === "model-detail" ? 63 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("data", (tmp_26_0 = i0.ɵɵpipeBind1(69, 49, ctx.performanceMatrix$)) !== null && tmp_26_0 !== undefined ? tmp_26_0 : i0.ɵɵpureFunction0(51, _c0))("config", ctx.heatmapConfig);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("resizable", true)("collapsible", false);
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.cost)("fa-chevron-up", ctx.panelStates.cost);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.panelStates.cost ? 78 : -1);
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.efficiency)("fa-chevron-up", ctx.panelStates.efficiency);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.panelStates.efficiency ? 85 : -1);
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("fa-chevron-down", !ctx.panelStates.executions)("fa-chevron-up", ctx.panelStates.executions);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.panelStates.executions ? 92 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedExecution ? 93 : -1);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitterComponent, i3.SplitterPaneComponent, i4.KPICardComponent, i5.LiveExecutionWidgetComponent, i6.TimeSeriesChartComponent, i7.PerformanceHeatmapComponent, i8.AsyncPipe, i8.TitleCasePipe, i8.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\n      min-height: 100vh;\n    }\n\n    .monitoring-header[_ngcontent-%COMP%] {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .monitoring-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .refresh-control[_ngcontent-%COMP%], .time-range-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .refresh-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%], .time-range-control[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .refresh-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], .time-range-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n    }\n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter[_ngcontent-%COMP%] {\n      height: calc(100vh - 550px); \n\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    \n\n    [_nghost-%COMP%]     .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    \n\n    .cost-chart-container[_ngcontent-%COMP%], .efficiency-chart-container[_ngcontent-%COMP%], .status-container[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      margin-bottom: 16px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-bars[_ngcontent-%COMP%], .efficiency-items[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .cost-bar-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info[_ngcontent-%COMP%] {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .cost-value[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #666;\n      min-width: 80px;\n      text-align: right;\n    }\n\n    \n\n    .efficiency-item[_ngcontent-%COMP%] {\n      padding: 12px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .efficiency-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .token-breakdown[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar[_ngcontent-%COMP%] {\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment[_ngcontent-%COMP%] {\n      height: 100%;\n    }\n\n    .token-segment--input[_ngcontent-%COMP%] {\n      background: #4caf50;\n    }\n\n    .token-segment--output[_ngcontent-%COMP%] {\n      background: #2196f3;\n    }\n\n    .token-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .output-label[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .cost-per-token[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\n      margin-top: 4px;\n    }\n\n    \n\n    .status-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .status-icon[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning[_ngcontent-%COMP%] {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary[_ngcontent-%COMP%] {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .status-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: #999;\n    }\n\n    \n\n    .execution-modal[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .open-record-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      color: #333;\n    }\n\n    .execution-modal-body[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      border-bottom: 1px solid #f0f0f0;\n      padding-bottom: 6px;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #333;\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed[_ngcontent-%COMP%] {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\n      font-family: monospace;\n    }\n\n    .child-executions[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution[_ngcontent-%COMP%] {\n      background: #f8f9fa;\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .child-type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\n    }\n\n    .child-status[_ngcontent-%COMP%] {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .loading-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    .spinner[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border: 3px solid #f3f3f3;\n      border-top: 3px solid #2196f3;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    \n\n    .drill-down-container[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs[_ngcontent-%COMP%] {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header[_ngcontent-%COMP%] {\n      display: flex;\n      border-bottom: 1px solid #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active[_ngcontent-%COMP%] {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n    }\n\n    .tab-title[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close[_ngcontent-%COMP%]:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: #333;\n    }\n\n    .tab-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .trends-chart[_ngcontent-%COMP%]   app-time-series-chart[_ngcontent-%COMP%] {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    \n\n    .tab-pane.trends-chart[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    \n\n    .executions-drill-down[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .drill-down-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp[_ngcontent-%COMP%] {\n      color: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge[_ngcontent-%COMP%] {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt[_ngcontent-%COMP%] {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent[_ngcontent-%COMP%] {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      color: #ddd;\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .model-detail[_ngcontent-%COMP%] {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: #333;\n      font-weight: 500;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      color: #4caf50;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%]::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: #f8f9fa;\n      border-radius: 8px;\n    }\n\n    .model-description[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .model-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\n      line-height: 1.5;\n    }\n\n    \n\n    .clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    \n\n    .analysis-panels[_ngcontent-%COMP%] {\n      padding: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%] {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon[_ngcontent-%COMP%] {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: _ngcontent-%COMP%_slideDown 0.2s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n\n    .live-executions-panel[_ngcontent-%COMP%]   app-live-execution-widget[_ngcontent-%COMP%] {\n      height: 300px;\n      display: block;\n    }\n\n    \n\n    @media (max-width: 1200px) {\n      .dashboard-splitter[_ngcontent-%COMP%] {\n        height: calc(100vh - 270px); \n\n        margin-bottom: 20px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels[_ngcontent-%COMP%] {\n        padding: 8px;\n      }\n      \n      .analysis-panel[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .monitoring-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter[_ngcontent-%COMP%] {\n        height: calc(100vh - 270px); \n\n        min-height: 400px;\n        margin-bottom: 20px;\n      }\n      \n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      \n\n      [_nghost-%COMP%]     .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      [_nghost-%COMP%]     .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header[_ngcontent-%COMP%] {\n        overflow-x: auto;\n      }\n      \n      .tab-item[_ngcontent-%COMP%] {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header[_ngcontent-%COMP%], \n   .table-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row[_ngcontent-%COMP%] {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%] {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell[_ngcontent-%COMP%]:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: #666;\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down[_ngcontent-%COMP%], \n   .model-detail[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-content[_ngcontent-%COMP%] {\n        padding: 12px;\n      }\n      \n      .panel-header[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n      }\n      \n      .panel-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n      }\n    }"] });
 }
-ExecutionMonitoringComponent.ɵfac = function ExecutionMonitoringComponent_Factory(t) { return new (t || ExecutionMonitoringComponent)(); };
-ExecutionMonitoringComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionMonitoringComponent, selectors: [["app-execution-monitoring"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 9, vars: 0, consts: [[1, "execution-monitoring"], [1, "header"], [1, "content"]], template: function ExecutionMonitoringComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
-        i0.ɵɵtext(3, "Execution Monitoring");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "p");
-        i0.ɵɵtext(5, "Monitor AI agent execution and performance");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(6, "div", 2)(7, "p");
-        i0.ɵɵtext(8, "Execution monitoring interface will be implemented here.");
-        i0.ɵɵelementEnd()()();
-    } }, styles: [".execution-monitoring[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  .header {\n    margin-bottom: 20px;\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #2c3e50;\n      font-size: 1.4rem;\n      font-weight: 600;\n    }\n    \n    p {\n      margin: 0;\n      color: #7f8c8d;\n      font-size: 0.9rem;\n    }\n  }\n\n  .content {\n    flex: 1;\n    background: #f8f9fa;\n    border-radius: 8px;\n    padding: 20px;\n    border: 1px solid #e9ecef;\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionMonitoringComponent, [{
         type: Component,
-        args: [{ selector: 'app-execution-monitoring', template: "<div class=\"execution-monitoring\">\n  <div class=\"header\">\n    <h3>Execution Monitoring</h3>\n    <p>Monitor AI agent execution and performance</p>\n  </div>\n  \n  <div class=\"content\">\n    <p>Execution monitoring interface will be implemented here.</p>\n  </div>\n</div>", styles: [".execution-monitoring {\n  padding: 20px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  .header {\n    margin-bottom: 20px;\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #2c3e50;\n      font-size: 1.4rem;\n      font-weight: 600;\n    }\n    \n    p {\n      margin: 0;\n      color: #7f8c8d;\n      font-size: 0.9rem;\n    }\n  }\n\n  .content {\n    flex: 1;\n    background: #f8f9fa;\n    border-radius: 8px;\n    padding: 20px;\n    border: 1px solid #e9ecef;\n  }\n}"] }]
-    }], () => [], { openEntityRecord: [{
+        args: [{ selector: 'app-execution-monitoring', template: `
+    <div class="execution-monitoring">
+      <!-- Header Controls -->
+      <div class="monitoring-header">
+        <h2 class="monitoring-title">
+          <i class="fa-solid fa-chart-line"></i>
+          AI Execution Monitoring
+        </h2>
+        
+        <div class="monitoring-controls">
+          <div class="refresh-control">
+            <label>Refresh:</label>
+            <select [(ngModel)]="refreshInterval" (change)="onRefreshIntervalChange()">
+              <option [value]="0">Manual</option>
+              <option [value]="10000">10s</option>
+              <option [value]="30000">30s</option>
+              <option [value]="60000">1m</option>
+              <option [value]="300000">5m</option>
+            </select>
+          </div>
+          
+          <div class="time-range-control">
+            <label>Time Range:</label>
+            <select [(ngModel)]="selectedTimeRange" (change)="onTimeRangeChange()">
+              <option value="1h">Last Hour</option>
+              <option value="6h">Last 6 Hours</option>
+              <option value="24h">Last 24 Hours</option>
+              <option value="7d">Last 7 Days</option>
+              <option value="30d">Last 30 Days</option>
+            </select>
+          </div>
+          
+          <button class="refresh-btn" (click)="refreshData()" [disabled]="isLoading">
+            <i class="fa-solid fa-refresh" [class.spinning]="isLoading"></i>
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <!-- KPI Dashboard -->
+      <div class="kpi-dashboard">
+        <div class="kpi-grid">
+          @for (kpi of kpiCards$ | async; track kpi.title) {
+            <app-kpi-card 
+              [data]="kpi"
+              (click)="onKpiClick(kpi)"
+              [class.clickable]="isKpiClickable(kpi)"
+            ></app-kpi-card>
+          }
+        </div>
+      </div>
+
+      <!-- Main Dashboard with Kendo Splitter -->
+      <kendo-splitter class="dashboard-splitter" orientation="vertical" (layoutChange)="onSplitterLayoutChange($event)">
+        <!-- Top Row: System Health and Trends Chart -->
+        <kendo-splitter-pane size="45%" [resizable]="true" [collapsible]="false">
+          <kendo-splitter orientation="horizontal" (layoutChange)="onSplitterLayoutChange($event)">
+            <!-- System Health -->
+            <kendo-splitter-pane size="30%" [resizable]="true" [collapsible]="true" [collapsed]="false">
+              <div class="dashboard-section system-status">
+                <div class="status-container">
+                  <div class="chart-header">
+                    <h4 class="chart-title">
+                      <i class="fa-solid fa-heartbeat"></i>
+                      System Health
+                    </h4>
+                  </div>
+                  @if (kpis$ | async; as kpis) {
+                    <div class="status-metrics">
+                      <div class="status-metric">
+                        <div class="status-icon status-icon--success">
+                          <i class="fa-solid fa-check"></i>
+                        </div>
+                        <div class="status-info">
+                          <div class="status-label">Success Rate</div>
+                          <div class="status-value">{{ (kpis.successRate * 100).toFixed(1) }}%</div>
+                          <div class="status-subtitle">Last {{ selectedTimeRange }}</div>
+                        </div>
+                      </div>
+                      
+                      <div class="status-metric">
+                        <div class="status-icon status-icon--warning">
+                          <i class="fa-solid fa-exclamation-triangle"></i>
+                        </div>
+                        <div class="status-info">
+                          <div class="status-label">Error Rate</div>
+                          <div class="status-value">{{ (kpis.errorRate * 100).toFixed(1) }}%</div>
+                          <div class="status-subtitle">{{ kpis.totalExecutions }} total executions</div>
+                        </div>
+                      </div>
+                      
+                      <div class="status-metric">
+                        <div class="status-icon status-icon--info">
+                          <i class="fa-solid fa-clock"></i>
+                        </div>
+                        <div class="status-info">
+                          <div class="status-label">Avg Response Time</div>
+                          <div class="status-value">{{ (kpis.avgExecutionTime / 1000).toFixed(2) }}s</div>
+                          <div class="status-subtitle">Across all models</div>
+                        </div>
+                      </div>
+                      
+                      <div class="status-metric">
+                        <div class="status-icon status-icon--primary">
+                          <i class="fa-solid fa-bolt"></i>
+                        </div>
+                        <div class="status-info">
+                          <div class="status-label">Active Executions</div>
+                          <div class="status-value">{{ kpis.activeExecutions }}</div>
+                          <div class="status-subtitle">Currently running</div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </kendo-splitter-pane>
+            
+            <!-- Drill-down Tab Container -->
+            <kendo-splitter-pane [resizable]="true" [collapsible]="false">
+              <div class="dashboard-section drill-down-container">
+                <div class="drill-down-tabs">
+                  <div class="tab-header">
+                    @for (tab of drillDownTabs; track tab.id) {
+                      <div 
+                        class="tab-item"
+                        [class.active]="activeTabId === tab.id"
+                        (click)="selectTab(tab.id)"
+                      >
+                        <span class="tab-title">{{ tab.title }}</span>
+                        @if (tab.closeable) {
+                          <button 
+                            class="tab-close"
+                            (click)="closeTab($event, tab.id)"
+                            title="Close tab"
+                          >
+                            <i class="fa-solid fa-times"></i>
+                          </button>
+                        }
+                      </div>
+                    }
+                  </div>
+                  
+                  <div class="tab-content">
+                    @if (activeTab?.type === 'chart') {
+                      <div class="tab-pane trends-chart">
+                        <app-time-series-chart
+                          [data]="(trends$ | async) ?? []"
+                          title="Execution Trends"
+                          [config]="timeSeriesConfig"
+                          (dataPointClick)="onDataPointClick($event)"
+                          (timeRangeChange)="onChartTimeRangeChange($event)"
+                        ></app-time-series-chart>
+                      </div>
+                    }
+                    
+                    @if (activeTab?.type === 'executions') {
+                      <div class="tab-pane executions-drill-down">
+                        <div class="drill-down-header">
+                          <h4>
+                            <i class="fa-solid fa-list"></i>
+                            {{ activeTab?.title }}
+                          </h4>
+                          <div class="drill-down-meta">
+                            @if (activeTab?.timestamp) {
+                              <span class="timestamp">{{ getFormattedTimestamp(activeTab) }}</span>
+                            }
+                            @if (activeTab?.metric) {
+                              <span class="metric-badge">{{ getFormattedMetricLabel(activeTab) }}</span>
+                            }
+                          </div>
+                        </div>
+                        
+                        @if (loadingDrillDown) {
+                          <div class="loading-spinner">
+                            <i class="fa-solid fa-spinner fa-spin"></i>
+                            Loading execution details...
+                          </div>
+                        } @else if (activeTab?.data?.length > 0) {
+                          <div class="executions-table">
+                            <div class="table-header">
+                              <div class="header-cell">Type</div>
+                              <div class="header-cell">Name</div>
+                              <div class="header-cell">Model</div>
+                              <div class="header-cell">Status</div>
+                              <div class="header-cell">Duration</div>
+                              <div class="header-cell">Cost</div>
+                              <div class="header-cell">Tokens</div>
+                              <div class="header-cell">Time</div>
+                            </div>
+                            @for (execution of activeTab?.data; track execution.id) {
+                              <div 
+                                class="table-row"
+                                (click)="viewExecutionDetail(execution)"
+                              >
+                                <div class="table-cell">
+                                  <span class="type-badge" [class]="'type-badge--' + execution.type">
+                                    {{ execution.type }}
+                                  </span>
+                                </div>
+                                <div class="table-cell">{{ execution.name }}</div>
+                                <div class="table-cell">{{ execution.model || 'N/A' }}</div>
+                                <div class="table-cell">
+                                  <span class="status-badge" [class]="'status-badge--' + execution.status">
+                                    {{ execution.status }}
+                                  </span>
+                                </div>
+                                <div class="table-cell">{{ formatDuration(execution.duration) }}</div>
+                                <div class="table-cell">{{ formatCurrency(execution.cost) }}</div>
+                                <div class="table-cell">{{ execution.tokens.toLocaleString() }}</div>
+                                <div class="table-cell">{{ formatTime(execution.startTime) }}</div>
+                              </div>
+                            }
+                          </div>
+                        } @else {
+                          <div class="no-data">
+                            <i class="fa-solid fa-inbox"></i>
+                            <p>No executions found for this time period</p>
+                          </div>
+                        }
+                      </div>
+                    }
+                    
+                    @if (activeTab?.type === 'model-detail') {
+                      <div class="tab-pane model-detail">
+                        <div class="drill-down-header">
+                          <h4>
+                            <i class="fa-solid fa-microchip"></i>
+                            Model Details: {{ activeTab?.data?.name }}
+                          </h4>
+                        </div>
+                        
+                        @if (loadingDrillDown) {
+                          <div class="loading-spinner">
+                            <i class="fa-solid fa-spinner fa-spin"></i>
+                            Loading model details...
+                          </div>
+                        } @else if (activeTab?.data) {
+                          <div class="model-details">
+                            <div class="model-info-grid">
+                              <div class="info-item">
+                                <label>Model Name:</label>
+                                <span>{{ activeTab?.data?.name }}</span>
+                              </div>
+                              <div class="info-item">
+                                <label>Vendor:</label>
+                                <span>{{ activeTab?.data?.vendor }}</span>
+                              </div>
+                              <div class="info-item">
+                                <label>API Name:</label>
+                                <span>{{ activeTab?.data?.apiName }}</span>
+                              </div>
+                              <div class="info-item">
+                                <label>Input Cost:</label>
+                                <span>\${{ activeTab?.data?.inputTokenCost?.toFixed(6) || '0' }} per token</span>
+                              </div>
+                              <div class="info-item">
+                                <label>Output Cost:</label>
+                                <span>\${{ activeTab?.data?.outputTokenCost?.toFixed(6) || '0' }} per token</span>
+                              </div>
+                              <div class="info-item">
+                                <label>Active:</label>
+                                <span class="status-indicator" [class.active]="activeTab?.data?.isActive">
+                                  {{ activeTab?.data?.isActive ? 'Yes' : 'No' }}
+                                </span>
+                              </div>
+                            </div>
+                            
+                            @if (activeTab?.data?.description) {
+                              <div class="model-description">
+                                <h5>Description</h5>
+                                <p>{{ activeTab?.data?.description }}</p>
+                              </div>
+                            }
+                          </div>
+                        }
+                      </div>
+                    }
+                  </div>
+                </div>
+              </div>
+            </kendo-splitter-pane>
+          </kendo-splitter>
+        </kendo-splitter-pane>
+
+        <!-- Bottom Row: Analysis Panels with Expansion Layout -->
+        <kendo-splitter-pane [resizable]="true" [collapsible]="false">
+          <kendo-splitter orientation="horizontal" (layoutChange)="onSplitterLayoutChange($event)">
+            <!-- Left: Performance Heatmap -->
+            <kendo-splitter-pane size="50%" [resizable]="true" [collapsible]="false">
+              <div class="dashboard-section performance-matrix">
+                <app-performance-heatmap
+                  [data]="(performanceMatrix$ | async) ?? []"
+                  title="Agent vs Model Performance"
+                  [config]="heatmapConfig"
+                ></app-performance-heatmap>
+              </div>
+            </kendo-splitter-pane>
+
+            <!-- Right: Analysis Panels with Collapsible Sections -->
+            <kendo-splitter-pane [resizable]="true" [collapsible]="false">
+              <div class="dashboard-section analysis-panels">
+                
+                <!-- Cost Analysis Panel -->
+                <div class="analysis-panel">
+                  <div class="panel-header" (click)="togglePanel('cost')">
+                    <span class="panel-title">
+                      <i class="fa-solid fa-dollar-sign"></i>
+                      Cost Analysis
+                    </span>
+                    <i class="fa-solid panel-toggle-icon" [class.fa-chevron-down]="!panelStates.cost" [class.fa-chevron-up]="panelStates.cost"></i>
+                  </div>
+                  @if (panelStates.cost) {
+                    <div class="panel-content">
+                      @if (costData$ | async; as costData) {
+                        <div class="cost-bars">
+                          @for (item of costData.slice(0, 8); track item.model) {
+                            <div class="cost-bar-item">
+                              <div class="cost-bar-info">
+                                <span class="model-name">{{ item.model }}</span>
+                                <span class="cost-value">{{ formatCurrency(item.cost) }}</span>
+                              </div>
+                              <div class="cost-bar-container">
+                                <div 
+                                  class="cost-bar"
+                                  [style.width.%]="getCostBarWidth(item.cost, getMaxCost(costData))"
+                                ></div>
+                              </div>
+                              <div class="token-info">
+                                {{ formatTokens(item.tokens) }} tokens
+                              </div>
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+
+                <!-- Token Efficiency Panel -->
+                <div class="analysis-panel">
+                  <div class="panel-header" (click)="togglePanel('efficiency')">
+                    <span class="panel-title">
+                      <i class="fa-solid fa-chart-pie"></i>
+                      Token Efficiency
+                    </span>
+                    <i class="fa-solid panel-toggle-icon" [class.fa-chevron-down]="!panelStates.efficiency" [class.fa-chevron-up]="panelStates.efficiency"></i>
+                  </div>
+                  @if (panelStates.efficiency) {
+                    <div class="panel-content">
+                      @if (tokenEfficiency$ | async; as efficiencyData) {
+                        <div class="efficiency-items">
+                          @for (item of efficiencyData.slice(0, 6); track item.model) {
+                            <div class="efficiency-item">
+                              <div class="efficiency-header">
+                                <span class="model-name">{{ item.model }}</span>
+                                <span class="efficiency-ratio">
+                                  {{ getTokenRatio(item.inputTokens, item.outputTokens) }}
+                                </span>
+                              </div>
+                              <div class="token-breakdown">
+                                <div class="token-bar">
+                                  <div 
+                                    class="token-segment token-segment--input"
+                                    [style.width.%]="getTokenPercentage(item.inputTokens, item.inputTokens + item.outputTokens)"
+                                  ></div>
+                                  <div 
+                                    class="token-segment token-segment--output"
+                                    [style.width.%]="getTokenPercentage(item.outputTokens, item.inputTokens + item.outputTokens)"
+                                  ></div>
+                                </div>
+                                <div class="token-labels">
+                                  <span class="input-label">Input: {{ formatTokens(item.inputTokens) }}</span>
+                                  <span class="output-label">Output: {{ formatTokens(item.outputTokens) }}</span>
+                                </div>
+                              </div>
+                              <div class="cost-per-token">
+                                {{ formatCostPerToken(item.cost, item.inputTokens + item.outputTokens) }}
+                              </div>
+                            </div>
+                          }
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+
+                <!-- Live Executions Panel -->
+                <div class="analysis-panel">
+                  <div class="panel-header" (click)="togglePanel('executions')">
+                    <span class="panel-title">
+                      <i class="fa-solid fa-bolt"></i>
+                      Live Executions
+                    </span>
+                    <i class="fa-solid panel-toggle-icon" [class.fa-chevron-down]="!panelStates.executions" [class.fa-chevron-up]="panelStates.executions"></i>
+                  </div>
+                  @if (panelStates.executions) {
+                    <div class="panel-content live-executions-panel">
+                      <app-live-execution-widget
+                        [executions]="(liveExecutions$ | async) ?? []"
+                        (executionClick)="onExecutionClick($event)"
+                      ></app-live-execution-widget>
+                    </div>
+                  }
+                </div>
+              </div>
+            </kendo-splitter-pane>
+          </kendo-splitter>
+        </kendo-splitter-pane>
+      </kendo-splitter>
+
+      <!-- Execution Details Modal -->
+      @if (selectedExecution) {
+        <div class="execution-modal" (click)="closeExecutionModal()">
+        <div class="execution-modal-content" (click)="$event.stopPropagation()">
+          <div class="execution-modal-header">
+            <h3>Execution Details</h3>
+            <div class="modal-header-actions">
+              <button class="open-record-btn" (click)="openFullRecord()">
+                <i class="fa-solid fa-external-link-alt"></i>
+                Open
+              </button>
+              <button class="close-btn" (click)="closeExecutionModal()">
+                <i class="fa-solid fa-times"></i>
+              </button>
+            </div>
+          </div>
+          <div class="execution-modal-body">
+            @if (executionDetails) {
+              <div class="execution-details">
+              <div class="detail-section">
+                <h4>Basic Information</h4>
+                <div class="detail-grid">
+                  <div class="detail-item">
+                    <label>Type:</label>
+                    <span>{{ executionDetails.type | titlecase }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <label>Name:</label>
+                    <span>{{ executionDetails.name }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <label>Status:</label>
+                    <span class="status-badge" [class]="'status-badge--' + executionDetails.status">
+                      {{ executionDetails.status | titlecase }}
+                    </span>
+                  </div>
+                  <div class="detail-item">
+                    <label>Started:</label>
+                    <span>{{ executionDetails.startTime | date:'medium' }}</span>
+                  </div>
+                  @if (executionDetails.endTime) {
+                    <div class="detail-item">
+                      <label>Completed:</label>
+                      <span>{{ executionDetails.endTime | date:'medium' }}</span>
+                    </div>
+                  }
+                  <div class="detail-item">
+                    <label>Duration:</label>
+                    <span>{{ formatDuration(getDuration(executionDetails)) }}</span>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="detail-section">
+                <h4>Resource Usage</h4>
+                <div class="detail-grid">
+                  <div class="detail-item">
+                    <label>Cost:</label>
+                    <span>{{ formatCurrency(executionDetails.cost, 6) }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <label>Tokens:</label>
+                    <span>{{ executionDetails.tokens.toLocaleString() }}</span>
+                  </div>
+                  @if (executionDetails.model) {
+                    <div class="detail-item">
+                      <label>Model:</label>
+                      <span>{{ executionDetails.model }}</span>
+                    </div>
+                  }
+                </div>
+              </div>
+              
+              @if (executionDetails.errorMessage) {
+                <div class="detail-section">
+                  <h4>Error Information</h4>
+                  <div class="error-message">{{ executionDetails.errorMessage }}</div>
+                </div>
+              }
+              
+              @if (executionDetails.children.length > 0) {
+                <div class="detail-section">
+                  <h4>Child Executions ({{ executionDetails.children.length }})</h4>
+                  <div class="child-executions">
+                    @for (child of executionDetails.children; track child.id) {
+                      <div class="child-execution">
+                    <div class="child-info">
+                      <span class="child-name">{{ child.name }}</span>
+                      <span class="child-type">{{ child.type }}</span>
+                      <span class="child-status" [class]="'status-badge--' + child.status">
+                        {{ child.status }}
+                      </span>
+                    </div>
+                    <div class="child-metrics">
+                        <span>{{ formatCurrency(child.cost) }}</span>
+                        <span>{{ child.tokens.toLocaleString() }} tokens</span>
+                      </div>
+                      </div>
+                    }
+                  </div>
+                </div>
+              }
+              </div>
+            }
+            
+            @if (loadingExecutionDetails) {
+              <div class="loading-details">
+                <div class="spinner"></div>
+                <p>Loading execution details...</p>
+              </div>
+            }
+          </div>
+        </div>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    .execution-monitoring {\n      padding: 20px;\n      background: #f8f9fa;\n      min-height: 100vh;\n    }\n\n    .monitoring-header {\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      margin-bottom: 20px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .monitoring-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .monitoring-title i {\n      color: #2196f3;\n    }\n\n    .monitoring-controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .refresh-control, .time-range-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .refresh-control label, .time-range-control label {\n      color: #666;\n      font-weight: 500;\n    }\n\n    .refresh-control select, .time-range-control select {\n      padding: 6px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 12px;\n      background: white;\n    }\n\n    .refresh-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: background 0.2s ease;\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: #1976d2;\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .refresh-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .kpi-dashboard {\n      margin-bottom: 20px;\n    }\n\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 16px;\n    }\n\n    .dashboard-splitter {\n      height: calc(100vh - 550px); /* Increased to account for headers and margins */\n      min-height: 600px;\n      margin-bottom: 20px;\n    }\n\n    .dashboard-section {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* Ensure splitter panes take full height */\n    :host ::ng-deep .k-splitter-pane {\n      overflow: hidden;\n    }\n\n    :host ::ng-deep .k-splitter .k-splitter-pane {\n      padding: 10px;\n    }\n\n    :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n      padding: 10px 5px;\n    }\n\n    :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n      padding: 5px 10px;\n    }\n\n    /* Cost Analysis Styles */\n    .cost-chart-container, .efficiency-chart-container, .status-container {\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      margin-bottom: 16px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .chart-title i {\n      color: #2196f3;\n    }\n\n    .cost-bars, .efficiency-items {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .cost-bar-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .cost-bar-item:last-child {\n      border-bottom: none;\n    }\n\n    .cost-bar-info {\n      min-width: 120px;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .model-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .cost-value {\n      font-size: 11px;\n      color: #ff9800;\n      font-weight: 600;\n    }\n\n    .cost-bar-container {\n      flex: 1;\n      height: 8px;\n      background: #f0f0f0;\n      border-radius: 4px;\n      overflow: hidden;\n    }\n\n    .cost-bar {\n      height: 100%;\n      background: linear-gradient(90deg, #ff9800, #f57c00);\n      border-radius: 4px;\n      transition: width 0.3s ease;\n    }\n\n    .token-info {\n      font-size: 10px;\n      color: #666;\n      min-width: 80px;\n      text-align: right;\n    }\n\n    /* Token Efficiency Styles */\n    .efficiency-item {\n      padding: 12px 0;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .efficiency-item:last-child {\n      border-bottom: none;\n    }\n\n    .efficiency-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n    }\n\n    .efficiency-ratio {\n      font-size: 11px;\n      color: #2196f3;\n      font-weight: 600;\n    }\n\n    .token-breakdown {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .token-bar {\n      height: 6px;\n      background: #f0f0f0;\n      border-radius: 3px;\n      overflow: hidden;\n      display: flex;\n    }\n\n    .token-segment {\n      height: 100%;\n    }\n\n    .token-segment--input {\n      background: #4caf50;\n    }\n\n    .token-segment--output {\n      background: #2196f3;\n    }\n\n    .token-labels {\n      display: flex;\n      justify-content: space-between;\n      font-size: 10px;\n      color: #666;\n    }\n\n    .input-label {\n      color: #4caf50;\n    }\n\n    .output-label {\n      color: #2196f3;\n    }\n\n    .cost-per-token {\n      font-size: 10px;\n      color: #999;\n      margin-top: 4px;\n    }\n\n    /* System Status Styles */\n    .status-metrics {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      flex: 1;\n    }\n\n    .status-metric {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .status-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    .status-icon--success {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-icon--warning {\n      background: rgba(255, 152, 0, 0.1);\n      color: #ff9800;\n    }\n\n    .status-icon--info {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-icon--primary {\n      background: rgba(156, 39, 176, 0.1);\n      color: #9c27b0;\n    }\n\n    .status-info {\n      flex: 1;\n    }\n\n    .status-label {\n      font-size: 12px;\n      color: #666;\n      font-weight: 500;\n    }\n\n    .status-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n      margin: 2px 0;\n    }\n\n    .status-subtitle {\n      font-size: 10px;\n      color: #999;\n    }\n\n    /* Execution Modal Styles */\n    .execution-modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1000;\n      padding: 20px;\n    }\n\n    .execution-modal-content {\n      background: white;\n      border-radius: 8px;\n      max-width: 800px;\n      width: 100%;\n      max-height: 80vh;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .execution-modal-header {\n      padding: 20px;\n      border-bottom: 1px solid #f0f0f0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .execution-modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-header-actions {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .open-record-btn {\n      background: #2196f3;\n      color: white;\n      border: none;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s ease;\n    }\n\n    .open-record-btn:hover {\n      background: #1976d2;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .open-record-btn i {\n      font-size: 12px;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      font-size: 16px;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .close-btn:hover {\n      color: #333;\n    }\n\n    .execution-modal-body {\n      padding: 20px;\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .execution-details {\n      display: flex;\n      flex-direction: column;\n      gap: 20px;\n    }\n\n    .detail-section h4 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      border-bottom: 1px solid #f0f0f0;\n      padding-bottom: 6px;\n    }\n\n    .detail-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 12px;\n    }\n\n    .detail-item {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .detail-item label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .detail-item span {\n      font-size: 13px;\n      color: #333;\n    }\n\n    .status-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border-radius: 12px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .status-badge--completed {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .status-badge--running {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .status-badge--failed {\n      background: rgba(244, 67, 54, 0.1);\n      color: #f44336;\n    }\n\n    .error-message {\n      background: #fff3e0;\n      border: 1px solid #ffcc02;\n      border-radius: 4px;\n      padding: 12px;\n      font-size: 12px;\n      color: #e65100;\n      font-family: monospace;\n    }\n\n    .child-executions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .child-execution {\n      background: #f8f9fa;\n      border-radius: 4px;\n      padding: 12px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .child-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .child-name {\n      font-size: 12px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .child-type {\n      font-size: 10px;\n      background: #e0e0e0;\n      padding: 2px 6px;\n      border-radius: 3px;\n      color: #666;\n    }\n\n    .child-status {\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 3px;\n    }\n\n    .child-metrics {\n      display: flex;\n      gap: 12px;\n      font-size: 11px;\n      color: #666;\n    }\n\n    .loading-details {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      gap: 12px;\n    }\n\n    .spinner {\n      width: 32px;\n      height: 32px;\n      border: 3px solid #f3f3f3;\n      border-top: 3px solid #2196f3;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n\n    /* Drill-down Tab Styles */\n    .drill-down-container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .drill-down-tabs {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-header {\n      display: flex;\n      border-bottom: 1px solid #e0e0e0;\n      background: #f8f9fa;\n      min-height: 40px;\n      overflow-x: auto;\n    }\n\n    .tab-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      font-size: 12px;\n      font-weight: 500;\n      color: #666;\n      white-space: nowrap;\n      transition: all 0.2s ease;\n      min-width: 120px;\n      justify-content: space-between;\n    }\n\n    .tab-item:hover {\n      background: #e9ecef;\n      color: #333;\n    }\n\n    .tab-item.active {\n      background: white;\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n    }\n\n    .tab-title {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .tab-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 2px;\n      border-radius: 2px;\n      font-size: 10px;\n      width: 16px;\n      height: 16px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .tab-close:hover {\n      background: rgba(0, 0, 0, 0.1);\n      color: #333;\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-pane {\n      height: 100%;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .trends-chart {\n      padding: 0;\n    }\n\n    .trends-chart app-time-series-chart {\n      height: 100%;\n      display: block;\n      overflow: hidden;\n    }\n\n    /* Ensure chart fits within tab pane */\n    .tab-pane.trends-chart {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    /* Drill-down specific styles */\n    .executions-drill-down {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .drill-down-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .drill-down-header h4 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .drill-down-meta {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n      font-size: 12px;\n    }\n\n    .timestamp {\n      color: #666;\n      background: #f0f0f0;\n      padding: 4px 8px;\n      border-radius: 4px;\n    }\n\n    .metric-badge {\n      background: #2196f3;\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n    }\n\n    .loading-spinner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 40px;\n      color: #666;\n      gap: 12px;\n    }\n\n    .executions-table {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .table-header {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      background: #f8f9fa;\n      padding: 12px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .table-row {\n      display: grid;\n      grid-template-columns: 80px 1fr 120px 100px 100px 80px 100px 120px;\n      gap: 12px;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      cursor: pointer;\n      transition: background 0.2s ease;\n      align-items: center;\n    }\n\n    .table-row:hover {\n      background: #f8f9fa;\n    }\n\n    .table-cell {\n      font-size: 12px;\n      color: #333;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .type-badge {\n      background: #e9ecef;\n      color: #666;\n      padding: 2px 6px;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    .type-badge--prompt {\n      background: rgba(33, 150, 243, 0.1);\n      color: #2196f3;\n    }\n\n    .type-badge--agent {\n      background: rgba(76, 175, 80, 0.1);\n      color: #4caf50;\n    }\n\n    .no-data {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 60px 20px;\n      color: #999;\n      gap: 16px;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      color: #ddd;\n    }\n\n    .no-data p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Model detail styles */\n    .model-detail {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .model-details {\n      display: flex;\n      flex-direction: column;\n      gap: 24px;\n    }\n\n    .model-info-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      gap: 16px;\n    }\n\n    .info-item {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .info-item label {\n      font-size: 11px;\n      color: #666;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin: 0;\n    }\n\n    .info-item span {\n      font-size: 14px;\n      color: #333;\n      font-weight: 500;\n    }\n\n    .status-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n    }\n\n    .status-indicator.active {\n      color: #4caf50;\n    }\n\n    .status-indicator.active::before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      background: #4caf50;\n      border-radius: 50%;\n    }\n\n    .model-description {\n      padding: 20px;\n      background: #f8f9fa;\n      border-radius: 8px;\n    }\n\n    .model-description h5 {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .model-description p {\n      margin: 0;\n      font-size: 13px;\n      color: #666;\n      line-height: 1.5;\n    }\n\n    /* Clickable KPI cards */\n    .clickable {\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    .clickable:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Collapsible Panel Styles */\n    .analysis-panels {\n      padding: 10px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .analysis-panel {\n      margin-bottom: 12px;\n      border-radius: 8px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      background: white;\n      overflow: hidden;\n    }\n\n    .analysis-panel:last-child {\n      margin-bottom: 0;\n    }\n\n    .panel-header {\n      padding: 12px 16px;\n      background: #f8f9fa;\n      border-bottom: 1px solid #e0e0e0;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      transition: background 0.2s ease;\n    }\n\n    .panel-header:hover {\n      background: #e9ecef;\n    }\n\n    .panel-title {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #333;\n      font-size: 14px;\n    }\n\n    .panel-title i {\n      color: #2196f3;\n      width: 16px;\n    }\n\n    .panel-toggle-icon {\n      color: #666;\n      font-size: 12px;\n      transition: transform 0.2s ease;\n    }\n\n    .panel-content {\n      padding: 16px;\n      border-top: 1px solid #f0f0f0;\n      animation: slideDown 0.2s ease-out;\n    }\n\n    @keyframes slideDown {\n      from {\n        opacity: 0;\n        max-height: 0;\n      }\n      to {\n        opacity: 1;\n        max-height: 500px;\n      }\n    }\n\n    .live-executions-panel {\n      padding: 0;\n    }\n\n    .live-executions-panel app-live-execution-widget {\n      height: 300px;\n      display: block;\n    }\n\n    /* Responsive Design */\n    @media (max-width: 1200px) {\n      .dashboard-splitter {\n        height: calc(100vh - 270px); /* Consistent with main height */\n        margin-bottom: 20px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 60px 1fr 100px 80px 80px 60px 80px 100px;\n        gap: 8px;\n      }\n      \n      .model-info-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .analysis-panels {\n        padding: 8px;\n      }\n      \n      .analysis-panel {\n        margin-bottom: 8px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .execution-monitoring {\n        padding: 12px;\n      }\n      \n      .monitoring-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .monitoring-controls {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .dashboard-splitter {\n        height: calc(100vh - 270px); /* Consistent with main height */\n        min-height: 400px;\n        margin-bottom: 20px;\n      }\n      \n      .kpi-grid {\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      }\n\n      /* Reduce padding on smaller screens */\n      :host ::ng-deep .k-splitter .k-splitter-pane {\n        padding: 5px;\n      }\n\n      :host ::ng-deep .k-splitter-horizontal > .k-splitter-pane {\n        padding: 5px 2px;\n      }\n\n      :host ::ng-deep .k-splitter-vertical > .k-splitter-pane {\n        padding: 2px 5px;\n      }\n      \n      .tab-header {\n        overflow-x: auto;\n      }\n      \n      .tab-item {\n        min-width: 100px;\n        padding: 6px 12px;\n      }\n      \n      .table-header,\n      .table-row {\n        grid-template-columns: 1fr;\n        gap: 4px;\n        text-align: left;\n      }\n      \n      .table-row {\n        display: block;\n        padding: 16px;\n      }\n      \n      .table-cell {\n        display: block;\n        margin-bottom: 8px;\n      }\n      \n      .table-cell:before {\n        content: attr(data-label) ': ';\n        font-weight: 600;\n        color: #666;\n        font-size: 11px;\n        text-transform: uppercase;\n      }\n      \n      .executions-drill-down,\n      .model-detail {\n        padding: 12px;\n      }\n      \n      .panel-content {\n        padding: 12px;\n      }\n      \n      .panel-header {\n        padding: 10px 12px;\n      }\n      \n      .panel-title {\n        font-size: 13px;\n      }\n    }\n  "] }]
+    }], () => [{ type: i1.AIInstrumentationService }], { initialState: [{
+            type: Input
+        }], openEntityRecord: [{
+            type: Output
+        }], stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 8 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionMonitoringComponent, { className: "ExecutionMonitoringComponent", filePath: "src/AI/components/execution-monitoring.component.ts", lineNumber: 1723 }); })();
 //# sourceMappingURL=execution-monitoring.component.js.map