@memberjunction/ng-core-entity-forms 2.74.0 → 2.76.0

package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js

@@ -3,9 +3,10 @@ import { Subject } from 'rxjs';
 import { RunView } from '@memberjunction/core';
 import * as d3 from 'd3';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@progress/kendo-angular-layout";
-import * as i3 from "@progress/kendo-angular-buttons";
+import * as i1 from "./ai-agent-run-cost.service";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "@progress/kendo-angular-buttons";
 const _c0 = ["modelDistributionChart"];
 const _c1 = ["executionTimeChart"];
 const _c2 = ["costByVendorChart"];
@@ -40,11 +41,11 @@ function AIAgentRunAnalyticsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵelement(0, "i", 24);
     i0.ɵɵtext(1, " Overview ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -53,7 +54,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template(rf, c
     i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.statusBreakdown.failed, " failed");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -62,56 +63,56 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template(rf, c
     i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.failed, " failed");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25)(2, "div", 26);
-    i0.ɵɵelement(3, "i", 27);
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "div", 27);
+    i0.ɵɵelement(3, "i", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 28)(5, "h3");
+    i0.ɵɵelementStart(4, "div", 29)(5, "h3");
     i0.ɵɵtext(6, "Total Prompts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 29);
+    i0.ɵɵelementStart(7, "div", 30);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 30)(10, "span", 31);
+    i0.ɵɵelementStart(9, "div", 31)(10, "span", 32);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template, 2, 1, "span", 32);
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template, 2, 1, "span", 33);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 25)(14, "div", 33);
-    i0.ɵɵelement(15, "i", 34);
+    i0.ɵɵelementStart(13, "div", 26)(14, "div", 34);
+    i0.ɵɵelement(15, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 28)(17, "h3");
+    i0.ɵɵelementStart(16, "div", 29)(17, "h3");
     i0.ɵɵtext(18, "Total Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 29);
+    i0.ɵɵelementStart(19, "div", 30);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 30)(22, "span", 31);
+    i0.ɵɵelementStart(21, "div", 31)(22, "span", 32);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(24, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template, 2, 1, "span", 32);
+    i0.ɵɵtemplate(24, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template, 2, 1, "span", 33);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(25, "div", 25)(26, "div", 35);
-    i0.ɵɵelement(27, "i", 36);
+    i0.ɵɵelementStart(25, "div", 26)(26, "div", 36);
+    i0.ɵɵelement(27, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 28)(29, "h3");
+    i0.ɵɵelementStart(28, "div", 29)(29, "h3");
     i0.ɵɵtext(30, "Total Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 29);
+    i0.ɵɵelementStart(31, "div", 30);
     i0.ɵɵtext(32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div", 30)(34, "span");
+    i0.ɵɵelementStart(33, "div", 31)(34, "span");
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(36, "div", 25)(37, "div", 37);
-    i0.ɵɵelement(38, "i", 38);
+    i0.ɵɵelementStart(36, "div", 26)(37, "div", 38);
+    i0.ɵɵelement(38, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 28)(40, "h3");
+    i0.ɵɵelementStart(39, "div", 29)(40, "h3");
     i0.ɵɵtext(41, "Execution Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 29);
+    i0.ɵɵelementStart(42, "div", 30);
     i0.ɵɵtext(43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 30)(45, "span");
+    i0.ɵɵelementStart(44, "div", 31)(45, "span");
     i0.ɵɵtext(46);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -138,14 +139,14 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1("", ctx_r1.timelineMetrics.totalSteps, " total steps");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 27);
+    i0.ɵɵelement(0, "i", 28);
     i0.ɵɵtext(1, " Prompt Analytics ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
+    i0.ɵɵelementStart(0, "div", 50)(1, "button", 51);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
-    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵelement(2, "i", 48);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -156,19 +157,19 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template(rf, ctx
     i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No prompt executions found in this agent run.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 53);
+    i0.ɵɵelementStart(4, "p", 54);
     i0.ɵɵtext(5, "This agent run may have only executed actions without any AI prompts.");
     i0.ɵɵelementEnd()();
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 70);
-    i0.ɵɵelement(1, "span", 71);
-    i0.ɵɵelementStart(2, "span", 72);
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵelement(1, "span", 72);
+    i0.ɵɵelementStart(2, "span", 73);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -180,8 +181,8 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Tem
     i0.ɵɵtextInterpolate3("", item_r6.key, ": ", item_r6.value.count, " (", (item_r6.value.count / ctx_r1.promptMetrics.totalCount * 100).toFixed(1), "%)");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template, 4, 5, "div", 69);
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template, 4, 5, "div", 70);
     i0.ɵɵpipe(2, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -191,56 +192,56 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template(
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "div", 56);
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("modelDistribution")); });
     i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵelement(4, "i", 57);
+    i0.ɵɵelement(4, "i", 58);
     i0.ɵɵtext(5, " Prompts by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 58);
-    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelementStart(6, "button", 59);
+    i0.ɵɵelement(7, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
-    i0.ɵɵelement(10, "div", 61, 0);
-    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template, 3, 3, "div", 62);
+    i0.ɵɵelementStart(8, "div", 60)(9, "div", 61);
+    i0.ɵɵelement(10, "div", 62, 0);
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template, 3, 3, "div", 63);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
+    i0.ɵɵelementStart(13, "div", 56)(14, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("executionTime")); });
     i0.ɵɵelementStart(15, "h3");
-    i0.ɵɵelement(16, "i", 38);
+    i0.ɵɵelement(16, "i", 39);
     i0.ɵɵtext(17, " Average Execution Time by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 58);
-    i0.ɵɵelement(19, "i", 47);
+    i0.ɵɵelementStart(18, "button", 59);
+    i0.ɵɵelement(19, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
-    i0.ɵɵelement(22, "div", 63, 1);
+    i0.ɵɵelementStart(20, "div", 60)(21, "div", 61);
+    i0.ɵɵelement(22, "div", 64, 1);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 55)(25, "div", 56);
+    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("costByVendor")); });
     i0.ɵɵelementStart(26, "h3");
-    i0.ɵɵelement(27, "i", 36);
+    i0.ɵɵelement(27, "i", 37);
     i0.ɵɵtext(28, " Cost Distribution by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "button", 58);
-    i0.ɵɵelement(30, "i", 47);
+    i0.ɵɵelementStart(29, "button", 59);
+    i0.ɵɵelement(30, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 59)(32, "div", 60);
-    i0.ɵɵelement(33, "div", 64, 2);
-    i0.ɵɵelementStart(35, "div", 65);
+    i0.ɵɵelementStart(31, "div", 60)(32, "div", 61);
+    i0.ɵɵelement(33, "div", 65, 2);
+    i0.ɵɵelementStart(35, "div", 66);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(37, "div", 55)(38, "div", 56);
+    i0.ɵɵelementStart(37, "div", 56)(38, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("tokenUsage")); });
     i0.ɵɵelementStart(39, "h3");
-    i0.ɵɵelement(40, "i", 66);
+    i0.ɵɵelement(40, "i", 67);
     i0.ɵɵtext(41, " Token Usage by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "button", 58);
-    i0.ɵɵelement(43, "i", 47);
+    i0.ɵɵelementStart(42, "button", 59);
+    i0.ɵɵelement(43, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 59)(45, "div", 60);
-    i0.ɵɵelement(46, "div", 67, 3);
+    i0.ɵɵelementStart(44, "div", 60)(45, "div", 61);
+    i0.ɵɵelement(46, "div", 68, 3);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -267,53 +268,53 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template(rf, ctx
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 73)(1, "div", 55)(2, "div", 56);
+    i0.ɵɵelementStart(0, "div", 74)(1, "div", 56)(2, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptTime")); });
     i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵelement(4, "i", 74);
+    i0.ɵɵelement(4, "i", 75);
     i0.ɵɵtext(5, " Average Execution Time by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 58);
-    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelementStart(6, "button", 59);
+    i0.ɵɵelement(7, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
-    i0.ɵɵelement(10, "div", 75, 4);
+    i0.ɵɵelementStart(8, "div", 60)(9, "div", 61);
+    i0.ɵɵelement(10, "div", 76, 4);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 55)(13, "div", 56);
+    i0.ɵɵelementStart(12, "div", 56)(13, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptToken")); });
     i0.ɵɵelementStart(14, "h3");
-    i0.ɵɵelement(15, "i", 76);
+    i0.ɵɵelement(15, "i", 77);
     i0.ɵɵtext(16, " Token Usage by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 58);
-    i0.ɵɵelement(18, "i", 47);
+    i0.ɵɵelementStart(17, "button", 59);
+    i0.ɵɵelement(18, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 59)(20, "div", 60);
-    i0.ɵɵelement(21, "div", 77, 5);
+    i0.ɵɵelementStart(19, "div", 60)(20, "div", 61);
+    i0.ɵɵelement(21, "div", 78, 5);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 55)(24, "div", 56);
+    i0.ɵɵelementStart(23, "div", 56)(24, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCost")); });
     i0.ɵɵelementStart(25, "h3");
-    i0.ɵɵelement(26, "i", 57);
+    i0.ɵɵelement(26, "i", 58);
     i0.ɵɵtext(27, " Cost Distribution by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "button", 58);
-    i0.ɵɵelement(29, "i", 47);
+    i0.ɵɵelementStart(28, "button", 59);
+    i0.ɵɵelement(29, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 59)(31, "div", 60);
-    i0.ɵɵelement(32, "div", 78, 6);
+    i0.ɵɵelementStart(30, "div", 60)(31, "div", 61);
+    i0.ɵɵelement(32, "div", 79, 6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 55)(35, "div", 56);
+    i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCount")); });
     i0.ɵɵelementStart(36, "h3");
-    i0.ɵɵelement(37, "i", 79);
+    i0.ɵɵelement(37, "i", 80);
     i0.ɵɵtext(38, " Prompt Execution Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "button", 58);
-    i0.ɵɵelement(40, "i", 47);
+    i0.ɵɵelementStart(39, "button", 59);
+    i0.ɵɵelement(40, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "div", 59)(42, "div", 60);
-    i0.ɵɵelement(43, "div", 80, 7);
+    i0.ɵɵelementStart(41, "div", 60)(42, "div", 61);
+    i0.ɵɵelement(43, "div", 81, 7);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -347,7 +348,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template(r
     i0.ɵɵelementStart(7, "td");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td")(10, "span", 83);
+    i0.ɵɵelementStart(9, "td")(10, "span", 84);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -365,7 +366,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template(r
     i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵelementStart(0, "div", 82)(1, "table")(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Prompt Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -381,7 +382,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx
     i0.ɵɵtext(13, "Success Rate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template, 12, 5, "tr", 82);
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template, 12, 5, "tr", 83);
     i0.ɵɵpipe(16, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -391,14 +392,14 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template, 4, 2, "div", 41)(2, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template, 6, 0, "div", 42)(3, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template, 48, 14, "div", 43)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template, 45, 12, "div", 44);
-    i0.ɵɵelementStart(5, "div", 45)(6, "button", 46);
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template, 4, 2, "div", 42)(2, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template, 6, 0, "div", 43)(3, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template, 48, 14, "div", 44)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template, 45, 12, "div", 45);
+    i0.ɵɵelementStart(5, "div", 46)(6, "button", 47);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
-    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelement(7, "i", 48);
     i0.ɵɵtext(8, " Detailed Prompt Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template, 17, 3, "div", 48);
+    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template, 17, 3, "div", 49);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -416,7 +417,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template(rf, ctx) { if
     i0.ɵɵproperty("ngIf", ctx_r1.promptDetailsExpanded);
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 34);
+    i0.ɵɵelement(0, "i", 35);
     i0.ɵɵtext(1, " Action Analytics ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template(rf, ctx) { if (rf & 1) {
@@ -429,7 +430,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template
     i0.ɵɵelementStart(5, "td");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td")(8, "span", 83);
+    i0.ɵɵelementStart(7, "td")(8, "span", 84);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "td");
@@ -452,7 +453,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template
     i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r10.key));
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵelementStart(0, "div", 82)(1, "table")(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Action Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -468,7 +469,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, c
     i0.ɵɵtext(13, "Type");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template, 12, 11, "tr", 82);
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template, 12, 11, "tr", 83);
     i0.ɵɵpipe(16, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -477,10 +478,10 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, c
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 1, ctx_r1.actionMetrics.byAction));
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
+    i0.ɵɵelementStart(0, "div", 97)(1, "span", 98);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 98);
+    i0.ɵɵelementStart(3, "span", 99);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -491,15 +492,15 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template
     i0.ɵɵtextInterpolate(error_r11.message);
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91)(1, "h3");
-    i0.ɵɵelement(2, "i", 92);
+    i0.ɵɵelementStart(0, "div", 92)(1, "h3");
+    i0.ɵɵelement(2, "i", 93);
     i0.ɵɵtext(3, " Common Errors ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 93);
+    i0.ɵɵelementStart(4, "p", 94);
     i0.ɵɵtext(5, " This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 94);
-    i0.ɵɵtemplate(7, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template, 5, 2, "div", 95);
+    i0.ɵɵelementStart(6, "div", 95);
+    i0.ɵɵtemplate(7, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template, 5, 2, "div", 96);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -507,47 +508,47 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template(rf, c
     i0.ɵɵproperty("ngForOf", ctx_r1.getTopErrors());
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99);
-    i0.ɵɵelement(1, "i", 100);
+    i0.ɵɵelementStart(0, "div", 100);
+    i0.ɵɵelement(1, "i", 101);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No action errors detected in this run. All actions completed successfully!");
     i0.ɵɵelementEnd()();
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 54)(2, "div", 55)(3, "div", 56);
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 55)(2, "div", 56)(3, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
     i0.ɵɵelementStart(4, "h3");
-    i0.ɵɵelement(5, "i", 84);
+    i0.ɵɵelement(5, "i", 85);
     i0.ɵɵtext(6, " Action Success Rate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 58);
-    i0.ɵɵelement(8, "i", 47);
+    i0.ɵɵelementStart(7, "button", 59);
+    i0.ɵɵelement(8, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 59)(10, "div", 60);
-    i0.ɵɵelement(11, "div", 85, 8);
+    i0.ɵɵelementStart(9, "div", 60)(10, "div", 61);
+    i0.ɵɵelement(11, "div", 86, 8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
+    i0.ɵɵelementStart(13, "div", 56)(14, "div", 57);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
     i0.ɵɵelementStart(15, "h3");
-    i0.ɵɵelement(16, "i", 86);
+    i0.ɵɵelement(16, "i", 87);
     i0.ɵɵtext(17, " Step Type Distribution");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 58);
-    i0.ɵɵelement(19, "i", 47);
+    i0.ɵɵelementStart(18, "button", 59);
+    i0.ɵɵelement(19, "i", 48);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
-    i0.ɵɵelement(22, "div", 87, 9);
+    i0.ɵɵelementStart(20, "div", 60)(21, "div", 61);
+    i0.ɵɵelement(22, "div", 88, 9);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(24, "div", 45)(25, "button", 46);
+    i0.ɵɵelementStart(24, "div", 46)(25, "button", 47);
     i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
-    i0.ɵɵelement(26, "i", 47);
+    i0.ɵɵelement(26, "i", 48);
     i0.ɵɵtext(27, " Detailed Action Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(28, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template, 17, 3, "div", 48);
+    i0.ɵɵtemplate(28, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template, 17, 3, "div", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 88);
-    i0.ɵɵtemplate(30, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template, 8, 1, "div", 89)(31, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template, 4, 0, "div", 90);
+    i0.ɵɵelementStart(29, "div", 89);
+    i0.ɵɵtemplate(30, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template, 8, 1, "div", 90)(31, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template, 4, 0, "div", 91);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -569,7 +570,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template(rf, ctx) { i
     i0.ɵɵproperty("ngIf", ctx_r1.actionMetrics.errorAnalysis.size === 0);
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 101);
+    i0.ɵɵelement(0, "i", 102);
     i0.ɵɵtext(1, " Model Performance Comparison ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template(rf, ctx) { if (rf & 1) {
@@ -620,7 +621,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template(rf, ct
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r12.outputTokens, "1.0-0"));
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 102)(2, "table")(3, "thead")(4, "tr")(5, "th");
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 103)(2, "table")(3, "thead")(4, "tr")(5, "th");
     i0.ɵɵtext(6, "Model");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "th");
@@ -645,7 +646,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { i
     i0.ɵɵtext(20, "Output Tokens");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(21, "tbody");
-    i0.ɵɵtemplate(22, AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template, 19, 14, "tr", 82);
+    i0.ɵɵtemplate(22, AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template, 19, 14, "tr", 83);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -653,19 +654,19 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { i
     i0.ɵɵproperty("ngForOf", ctx_r1.getModelPerformanceData());
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 103);
+    i0.ɵɵelement(0, "i", 104);
     i0.ɵɵtext(1, " Execution Timeline Analysis ");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 111);
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵelementStart(2, "span", 112);
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 113);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 113);
+    i0.ɵɵelementStart(4, "span", 114);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 114);
+    i0.ɵɵelementStart(6, "span", 115);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -681,35 +682,35 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template(rf, c
     i0.ɵɵtextInterpolate1("(", (type_r13.value / ctx_r1.timelineMetrics.totalSteps * 100).toFixed(1), "%)");
 } }
 function AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 104)(2, "div", 105)(3, "span", 106);
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 105)(2, "div", 106)(3, "span", 107);
     i0.ɵɵtext(4, "Total Steps");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 107);
+    i0.ɵɵelementStart(5, "span", 108);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 105)(8, "span", 106);
+    i0.ɵɵelementStart(7, "div", 106)(8, "span", 107);
     i0.ɵɵtext(9, "Parallel Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 107);
+    i0.ɵɵelementStart(10, "span", 108);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 105)(13, "span", 106);
+    i0.ɵɵelementStart(12, "div", 106)(13, "span", 107);
     i0.ɵɵtext(14, "Max Nesting Depth");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 107);
+    i0.ɵɵelementStart(15, "span", 108);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 105)(18, "span", 106);
+    i0.ɵɵelementStart(17, "div", 106)(18, "span", 107);
     i0.ɵɵtext(19, "Sub-Agent Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 107);
+    i0.ɵɵelementStart(20, "span", 108);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 108)(23, "h3");
+    i0.ɵɵelementStart(22, "div", 109)(23, "h3");
     i0.ɵɵtext(24, "Steps by Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 109);
-    i0.ɵɵtemplate(26, AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template, 8, 4, "div", 110);
+    i0.ɵɵelementStart(25, "div", 110);
+    i0.ɵɵtemplate(26, AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template, 8, 4, "div", 111);
     i0.ɵɵpipe(27, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -726,23 +727,25 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template(rf, ctx) { i
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(27, 5, ctx_r1.timelineMetrics.stepsByType));
 } }
 function AIAgentRunAnalyticsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 20);
-    i0.ɵɵtemplate(3, AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template, 2, 0, "ng-template", 21)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template, 47, 10, "ng-template", 22);
+    i0.ɵɵelementStart(0, "div", 19)(1, "kendo-panelbar", 20)(2, "kendo-panelbar-item", 21);
+    i0.ɵɵtemplate(3, AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template, 2, 0, "ng-template", 22)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template, 47, 10, "ng-template", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "kendo-panelbar-item", 20);
-    i0.ɵɵtemplate(6, AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template, 2, 0, "ng-template", 21)(7, AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template, 10, 6, "ng-template", 22);
+    i0.ɵɵelementStart(5, "kendo-panelbar-item", 21);
+    i0.ɵɵtemplate(6, AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template, 2, 0, "ng-template", 22)(7, AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template, 10, 6, "ng-template", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "kendo-panelbar-item", 20);
-    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template, 2, 0, "ng-template", 21)(10, AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template, 32, 10, "ng-template", 22);
+    i0.ɵɵelementStart(8, "kendo-panelbar-item", 21);
+    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template, 2, 0, "ng-template", 22)(10, AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template, 32, 10, "ng-template", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "kendo-panelbar-item", 20);
-    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template, 2, 0, "ng-template", 21)(13, AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template, 23, 1, "ng-template", 22);
+    i0.ɵɵelementStart(11, "kendo-panelbar-item", 21);
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template, 2, 0, "ng-template", 22)(13, AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template, 23, 1, "ng-template", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "kendo-panelbar-item", 20);
-    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template, 2, 0, "ng-template", 21)(16, AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template, 28, 7, "ng-template", 22);
+    i0.ɵɵelementStart(14, "kendo-panelbar-item", 21);
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template, 2, 0, "ng-template", 22)(16, AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template, 28, 7, "ng-template", 23);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("keepItemContent", true);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("expanded", true);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("expanded", true);
@@ -754,8 +757,9 @@ function AIAgentRunAnalyticsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("expanded", true);
 } }
 export class AIAgentRunAnalyticsComponent {
-    constructor(cdr) {
+    constructor(cdr, costService) {
         this.cdr = cdr;
+        this.costService = costService;
         this.destroy$ = new Subject();
         // Chart expansion states
         this.expandedCharts = {
@@ -837,11 +841,9 @@ export class AIAgentRunAnalyticsComponent {
     }
     async loadAllRunData() {
         const rv = new RunView();
-        // Get all agent runs in the hierarchy (including the main run and all sub-agent runs)
+        // Get all agent run IDs in hierarchy (including root and children)
         const agentRunIds = await this.getAllAgentRunIds(this.agentRunId);
-        console.log('Loading analytics for agent run IDs:', agentRunIds);
-        console.log('Number of agent run IDs:', agentRunIds.length);
-        // Batch load all data
+        // Batch load all data (except prompt runs which we'll load via shared service)
         const results = await rv.RunViews([
             // Main agent run
             {
@@ -853,49 +855,28 @@ export class AIAgentRunAnalyticsComponent {
                 EntityName: 'MJ: AI Agent Runs',
                 ExtraFilter: agentRunIds.length > 1 ? `ID IN ('${agentRunIds.slice(1).join("','")}')` : `ID = '00000000-0000-0000-0000-000000000000'`,
             },
-            // All prompt runs for all agent runs - linked through AI Agent Run Steps
-            {
-                EntityName: 'MJ: AI Prompt Runs',
-                ExtraFilter: `ID IN (SELECT TargetLogID FROM __mj.vwAIAgentRunSteps WHERE AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompt')`,
-            },
             // All action logs - need to get via steps
             {
                 EntityName: 'MJ: AI Agent Run Steps',
                 ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Actions'`,
             },
-            // All steps for timeline analysis
+            // All steps for timeline analysis - only need basic fields like StepType
             {
                 EntityName: 'MJ: AI Agent Run Steps',
                 ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}')`,
-                ResultType: 'entity_object'
             }
         ]);
         // Process results
-        console.log('RunViews results:', results.map((r, i) => ({
-            index: i,
-            success: r.Success,
-            count: r.Results?.length || 0,
-            errorMessage: r.ErrorMessage
-        })));
         if (results[0].Success && results[0].Results && results[0].Results.length > 0) {
             this.agentRun = results[0].Results[0];
         }
         if (results[1].Success) {
             this.subAgentRuns = results[1].Results || [];
         }
+        // Load all prompt runs for the agent run hierarchy
+        this.allPromptRuns = await this.loadAllPromptRuns(agentRunIds);
         if (results[2].Success) {
-            this.allPromptRuns = results[2].Results || [];
-            console.log(`Found ${this.allPromptRuns.length} prompt runs for agent run IDs:`, agentRunIds);
-            console.log('Prompt runs query:', `ID IN (SELECT TargetLogID FROM __mj.vwAIAgentRunSteps WHERE AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompts')`);
-            if (this.allPromptRuns.length > 0) {
-                console.log('First prompt run sample:', this.allPromptRuns[0]);
-            }
-        }
-        else {
-            console.error('Failed to load prompt runs:', results[2].ErrorMessage);
-        }
-        if (results[3].Success) {
-            const actionSteps = results[3].Results || [];
+            const actionSteps = results[2].Results || [];
             // Now load the actual action logs
             if (actionSteps.length > 0) {
                 const actionLogIds = actionSteps
@@ -912,32 +893,10 @@ export class AIAgentRunAnalyticsComponent {
                 }
             }
         }
-        if (results[4].Success) {
-            this.allSteps = results[4].Results || [];
+        if (results[3].Success) {
+            this.allSteps = results[3].Results || [];
         }
     }
-    async getAllAgentRunIds(rootRunId) {
-        const allIds = [rootRunId];
-        const rv = new RunView();
-        // Recursively get all sub-agent run IDs
-        const getSubRunIds = async (parentId, depth = 0) => {
-            const result = await rv.RunView({
-                EntityName: 'MJ: AI Agent Runs',
-                ExtraFilter: `ParentRunID = '${parentId}'`,
-                ResultType: 'entity_object'
-            });
-            if (result.Success && result.Results) {
-                console.log(`Found ${result.Results.length} sub-agent runs at depth ${depth} for parent ${parentId}`);
-                for (const subRun of result.Results) {
-                    allIds.push(subRun.ID);
-                    await getSubRunIds(subRun.ID, depth + 1); // Recursive call
-                }
-            }
-        };
-        await getSubRunIds(rootRunId);
-        console.log(`Total agent run IDs found: ${allIds.length}`);
-        return allIds;
-    }
     initializePromptMetrics() {
         return {
             totalCount: 0,
@@ -2014,7 +1973,64 @@ export class AIAgentRunAnalyticsComponent {
             .style('font-weight', 'bold')
             .text('Prompt Execution Count');
     }
-    static { this.ɵfac = function AIAgentRunAnalyticsComponent_Factory(t) { return new (t || AIAgentRunAnalyticsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    /**
+     * Get all agent run IDs in hierarchy, starting from the root run
+     */
+    async getAllAgentRunIds(rootRunId) {
+        const rv = new RunView();
+        const agentRunIds = [rootRunId];
+        // Simple recursive approach to find all child runs
+        const findChildRuns = async (parentId) => {
+            const result = await rv.RunView({
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: `ParentRunID = '${parentId}'`,
+            });
+            if (result.Success && result.Results && result.Results.length > 0) {
+                for (const childRun of result.Results) {
+                    if (!agentRunIds.includes(childRun.ID)) {
+                        agentRunIds.push(childRun.ID);
+                        await findChildRuns(childRun.ID); // Recursively find children
+                    }
+                }
+            }
+        };
+        await findChildRuns(rootRunId);
+        return agentRunIds;
+    }
+    /**
+     * Load all prompt runs for the given agent run IDs
+     * Uses the same approach as the cost calculation: find prompt runs via agent run steps
+     */
+    async loadAllPromptRuns(agentRunIds) {
+        if (agentRunIds.length === 0)
+            return [];
+        const rv = new RunView();
+        // First, get all the prompt steps for the agent runs
+        const stepsResult = await rv.RunView({
+            EntityName: 'MJ: AI Agent Run Steps',
+            ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompt'`,
+            ResultType: 'simple'
+        });
+        if (!stepsResult.Success || !stepsResult.Results || stepsResult.Results.length === 0) {
+            return [];
+        }
+        // Extract the TargetLogID values (these are the prompt run IDs)
+        const promptRunIds = stepsResult.Results
+            .map(step => step.TargetLogID)
+            .filter(id => id); // Remove any null/undefined values
+        if (promptRunIds.length === 0) {
+            return [];
+        }
+        // Now get the actual prompt runs
+        const promptResult = await rv.RunView({
+            EntityName: 'MJ: AI Prompt Runs',
+            ExtraFilter: `ID IN ('${promptRunIds.join("','")}')`,
+            OrderBy: 'RunAt',
+            ResultType: 'simple'
+        });
+        return promptResult.Success ? (promptResult.Results || []) : [];
+    }
+    static { this.ɵfac = function AIAgentRunAnalyticsComponent_Factory(t) { return new (t || AIAgentRunAnalyticsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.AIAgentRunCostService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunAnalyticsComponent, selectors: [["mj-ai-agent-run-analytics"]], viewQuery: function AIAgentRunAnalyticsComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
             i0.ɵɵviewQuery(_c1, 5);
@@ -2038,9 +2054,9 @@ export class AIAgentRunAnalyticsComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptTokenDistributionChart = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCostDistributionChart = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCountByNameChart = _t.first);
-        } }, inputs: { agentRunId: "agentRunId" }, decls: 4, vars: 3, consts: [["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], ["actionSuccessRateChart", ""], ["stepTypeChart", ""], [1, "analytics-container"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], ["class", "analytics-content", 4, "ngIf"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["kendoButton", "", 3, "click"], [1, "analytics-content"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [1, "fas", "fa-tachometer-alt"], [1, "summary-cards"], [1, "summary-card"], [1, "card-icon", "prompts"], [1, "fas", "fa-microchip"], [1, "card-content"], [1, "metric-value"], [1, "metric-detail"], [1, "success"], ["class", "failed", 4, "ngIf"], [1, "card-icon", "actions"], [1, "fas", "fa-cog"], [1, "card-icon", "cost"], [1, "fas", "fa-dollar-sign"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "failed"], [1, "analytics-panel"], ["class", "view-mode-toggle", 4, "ngIf"], ["class", "no-data-message", 4, "ngIf"], ["class", "charts-grid", 4, "ngIf"], ["class", "charts-grid", "style", "margin-top: 20px;", 4, "ngIf"], [1, "detailed-metrics"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "fas", 3, "ngClass"], ["class", "metrics-table", 4, "ngIf"], [1, "view-mode-toggle"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "no-data-message"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "charts-grid"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-pie"], [1, "expand-btn"], [1, "chart-card-body"], [1, "chart-container"], ["id", "modelDistributionChart"], ["class", "chart-legend", 4, "ngIf"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "chart-legend"], ["class", "legend-item", 4, "ngFor", "ngForOf"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "metrics-table"], [4, "ngFor", "ngForOf"], [1, "success-rate"], [1, "fas", "fa-chart-bar"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], ["class", "error-analysis", 4, "ngIf"], ["class", "no-errors", 4, "ngIf"], [1, "error-analysis"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], ["class", "error-item", 4, "ngFor", "ngForOf"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "no-errors"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "model-comparison"], [1, "fas", "fa-stream"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], ["class", "step-type-item", 4, "ngFor", "ngForOf"], [1, "step-type-item"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { agentRunId: "agentRunId" }, decls: 4, vars: 3, consts: [["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], ["actionSuccessRateChart", ""], ["stepTypeChart", ""], [1, "analytics-container"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], ["class", "analytics-content", 4, "ngIf"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["kendoButton", "", 3, "click"], [1, "analytics-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [1, "fas", "fa-tachometer-alt"], [1, "summary-cards"], [1, "summary-card"], [1, "card-icon", "prompts"], [1, "fas", "fa-microchip"], [1, "card-content"], [1, "metric-value"], [1, "metric-detail"], [1, "success"], ["class", "failed", 4, "ngIf"], [1, "card-icon", "actions"], [1, "fas", "fa-cog"], [1, "card-icon", "cost"], [1, "fas", "fa-dollar-sign"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "failed"], [1, "analytics-panel"], ["class", "view-mode-toggle", 4, "ngIf"], ["class", "no-data-message", 4, "ngIf"], ["class", "charts-grid", 4, "ngIf"], ["class", "charts-grid", "style", "margin-top: 20px;", 4, "ngIf"], [1, "detailed-metrics"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "fas", 3, "ngClass"], ["class", "metrics-table", 4, "ngIf"], [1, "view-mode-toggle"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "no-data-message"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "charts-grid"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-pie"], [1, "expand-btn"], [1, "chart-card-body"], [1, "chart-container"], ["id", "modelDistributionChart"], ["class", "chart-legend", 4, "ngIf"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "chart-legend"], ["class", "legend-item", 4, "ngFor", "ngForOf"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "metrics-table"], [4, "ngFor", "ngForOf"], [1, "success-rate"], [1, "fas", "fa-chart-bar"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], ["class", "error-analysis", 4, "ngIf"], ["class", "no-errors", 4, "ngIf"], [1, "error-analysis"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], ["class", "error-item", 4, "ngFor", "ngForOf"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "no-errors"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "model-comparison"], [1, "fas", "fa-stream"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], ["class", "step-type-item", 4, "ngFor", "ngForOf"], [1, "step-type-item"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 10);
-            i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_1_Template, 4, 0, "div", 11)(2, AIAgentRunAnalyticsComponent_div_2_Template, 6, 1, "div", 12)(3, AIAgentRunAnalyticsComponent_div_3_Template, 17, 5, "div", 13);
+            i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_1_Template, 4, 0, "div", 11)(2, AIAgentRunAnalyticsComponent_div_2_Template, 6, 1, "div", 12)(3, AIAgentRunAnalyticsComponent_div_3_Template, 17, 6, "div", 13);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -2049,12 +2065,12 @@ export class AIAgentRunAnalyticsComponent {
             i0.ɵɵproperty("ngIf", ctx.error && !ctx.isLoading);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.error);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.PanelBarComponent, i2.PanelBarItemComponent, i2.PanelBarContentDirective, i2.PanelBarItemTitleDirective, i3.ButtonComponent, i1.DecimalPipe, i1.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.summary-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .success[_ngcontent-%COMP%] {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .failed[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n  padding: 15px;\n}\n\n\n\n  .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n  .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n  .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n\n\n.charts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n\n\n.chart-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-card-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 400px;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.chart-container[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\n\n.chart-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total[_ngcontent-%COMP%] {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.metrics-table[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.metrics-table[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #495057;\n}\n\n\n\n.no-errors[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.no-data-message[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p.small[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n\n\n.model-comparison[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.model-comparison[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n\n\n.timeline-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n  .summary-cards[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }); }
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i3.PanelBarComponent, i3.PanelBarItemComponent, i3.PanelBarContentDirective, i3.PanelBarItemTitleDirective, i4.ButtonComponent, i2.DecimalPipe, i2.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.summary-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .success[_ngcontent-%COMP%] {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .failed[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n  padding: 15px;\n}\n\n\n\n  .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n  .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n  .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n\n\n.charts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n\n\n.chart-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-card-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 400px;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.chart-container[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\n\n.chart-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total[_ngcontent-%COMP%] {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.metrics-table[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.metrics-table[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #495057;\n}\n\n\n\n.no-errors[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.no-data-message[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p.small[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n\n\n.model-comparison[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.model-comparison[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n\n\n.timeline-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n  .summary-cards[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunAnalyticsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-run-analytics', template: "<div class=\"analytics-container\">\n  <!-- Loading State -->\n  <div class=\"loading-state\" *ngIf=\"isLoading\">\n    <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n    <p>Loading analytics data...</p>\n  </div>\n\n  <!-- Error State -->\n  <div class=\"error-state\" *ngIf=\"error && !isLoading\">\n    <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n    <p>{{ error }}</p>\n    <button kendoButton (click)=\"loadData()\">Retry</button>\n  </div>\n\n  <!-- Analytics Content -->\n  <div class=\"analytics-content\" *ngIf=\"!isLoading && !error\">\n    <kendo-panelbar>\n      <!-- Summary Cards -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-tachometer-alt\"></i> Overview\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"summary-cards\">\n      <div class=\"summary-card\">\n        <div class=\"card-icon prompts\">\n          <i class=\"fas fa-microchip\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Prompts</h3>\n          <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"promptMetrics.statusBreakdown.failed > 0\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon actions\">\n          <i class=\"fas fa-cog\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Actions</h3>\n          <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"actionMetrics.statusBreakdown.failed > 0\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon cost\">\n          <i class=\"fas fa-dollar-sign\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Cost</h3>\n          <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon time\">\n          <i class=\"fas fa-clock\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Execution Time</h3>\n          <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ timelineMetrics.totalSteps }} total steps</span>\n          </div>\n        </div>\n      </div>\n    </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Prompt Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-microchip\"></i> Prompt Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n        <!-- View Mode Toggle -->\n        <div class=\"view-mode-toggle\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  size=\"small\"\n                  (click)=\"toggleViewMode()\">\n            <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n            {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n          </button>\n        </div>\n        \n        <!-- No prompts message -->\n        <div class=\"no-data-message\" *ngIf=\"promptMetrics.totalCount === 0\">\n          <i class=\"fas fa-info-circle\"></i>\n          <p>No prompt executions found in this agent run.</p>\n          <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n        </div>\n\n        <div class=\"charts-grid\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Model Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n                <div class=\"chart-legend\" *ngIf=\"promptMetrics.byModel.size > 0\">\n                  <div class=\"legend-item\" *ngFor=\"let item of promptMetrics.byModel | keyvalue\">\n                    <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n                    <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Execution Time by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n              <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"executionTimeChart\" #executionTimeChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Cost by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n              <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"costByVendorChart\" #costByVendorChart></div>\n                <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n              <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Additional Prompt Analytics Charts -->\n        <div class=\"charts-grid\" style=\"margin-top: 20px;\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Prompt Execution Time Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n              <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n              <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Cost Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Count by Name -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n              <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Prompt Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Prompt Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"promptDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Prompt Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Total Time</th>\n                  <th>Success Rate</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let prompt of promptMetrics.byPrompt | keyvalue\">\n                  <td>{{ prompt.key }}</td>\n                  <td>{{ prompt.value.count }}</td>\n                  <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n                  <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\">\n                      <!-- Calculate success rate for this prompt -->\n                      {{ calculatePromptSuccessRate(prompt.key) }}%\n                    </span>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Action Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-cog\"></i> Action Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"charts-grid\">\n          <!-- Action Success Rate -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n              <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Step Type Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n              <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"stepTypeChart\" #stepTypeChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Action Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Action Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"actionDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Action Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Success Rate</th>\n                  <th>Type</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let action of actionMetrics.byAction | keyvalue\">\n                  <td>{{ action.key }}</td>\n                  <td>{{ action.value.count }}</td>\n                  <td>{{ formatDuration(action.value.avgTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\" \n                                                [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n                                                [class.low]=\"action.value.successRate <= 0.7\">\n                      {{ (action.value.successRate * 100).toFixed(1) }}%\n                    </span>\n                  </td>\n                  <td>{{ getActionType(action.key) }}</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        <!-- Error Analysis -->\n        <div class=\"error-analysis-section\">\n          <div class=\"error-analysis\" *ngIf=\"actionMetrics.errorAnalysis.size > 0\">\n          <h3>\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Common Errors\n          </h3>\n          <p class=\"error-analysis-description\">\n            This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n          </p>\n          <div class=\"error-list\">\n            <div class=\"error-item\" *ngFor=\"let error of getTopErrors()\">\n              <span class=\"error-count\">{{ error.count }}x</span>\n              <span class=\"error-message\">{{ error.message }}</span>\n            </div>\n          </div>\n        </div>\n          <div class=\"no-errors\" *ngIf=\"actionMetrics.errorAnalysis.size === 0\">\n            <i class=\"fas fa-check-circle\"></i>\n            <p>No action errors detected in this run. All actions completed successfully!</p>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Model Performance Comparison -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"model-comparison\">\n          <table>\n            <thead>\n              <tr>\n                <th>Model</th>\n                <th>Vendor</th>\n                <th>Prompts</th>\n                <th>Avg Time</th>\n                <th>Total Cost</th>\n                <th>Avg Cost/Prompt</th>\n                <th>Input Tokens</th>\n                <th>Output Tokens</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let model of getModelPerformanceData()\">\n                <td>{{ model.name }}</td>\n                <td>{{ model.vendor }}</td>\n                <td>{{ model.count }}</td>\n                <td>{{ formatDuration(model.avgTime) }}</td>\n                <td>{{ formatCost(model.totalCost) }}</td>\n                <td>{{ formatCost(model.avgCost) }}</td>\n                <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n                <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Timeline Analysis -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"timeline-stats\">\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Total Steps</span>\n            <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Parallel Executions</span>\n            <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Max Nesting Depth</span>\n            <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Sub-Agent Runs</span>\n            <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n          </div>\n        </div>\n\n        <div class=\"step-breakdown\">\n          <h3>Steps by Type</h3>\n          <div class=\"step-type-list\">\n            <div class=\"step-type-item\" *ngFor=\"let type of timelineMetrics.stepsByType | keyvalue\">\n              <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n              <span class=\"type-name\">{{ type.key }}</span>\n              <span class=\"type-count\">{{ type.value }}</span>\n              <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n            </div>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n    </kendo-panelbar>\n  </div>\n</div>", styles: [".analytics-container {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state i,\n.error-state i {\n  margin-bottom: 15px;\n}\n\n.error-state {\n  color: #dc3545;\n}\n\n/* Summary Cards */\n.summary-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail .success {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail .failed {\n  color: #dc3545;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n  padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n/* Charts */\n.charts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header h3 i {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn:hover {\n  color: #495057;\n}\n\n.chart-card-body {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded .chart-card-body {\n  padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n  min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container {\n  position: relative;\n}\n\n.chart-container h3 {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container > div {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics button {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n  margin-right: 8px;\n}\n\n.metrics-table {\n  overflow-x: auto;\n}\n\n.metrics-table table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table tr:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate {\n  font-weight: 500;\n}\n\n.success-rate.high {\n  color: #28a745;\n}\n\n.success-rate.medium {\n  color: #ffc107;\n}\n\n.success-rate.low {\n  color: #dc3545;\n}\n\n/* Error Analysis */\n.error-analysis {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis h3 {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message {\n  flex: 1;\n  color: #495057;\n}\n\n/* No errors state */\n.no-errors {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors i {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message p {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message p.small {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n/* Model Comparison Table */\n.model-comparison {\n  overflow-x: auto;\n}\n\n.model-comparison table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison tr:hover {\n  background-color: #f8f9fa;\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown h3 {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item i {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .summary-cards {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { agentRunId: [{
+        args: [{ selector: 'mj-ai-agent-run-analytics', template: "<div class=\"analytics-container\">\n  <!-- Loading State -->\n  <div class=\"loading-state\" *ngIf=\"isLoading\">\n    <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n    <p>Loading analytics data...</p>\n  </div>\n\n  <!-- Error State -->\n  <div class=\"error-state\" *ngIf=\"error && !isLoading\">\n    <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n    <p>{{ error }}</p>\n    <button kendoButton (click)=\"loadData()\">Retry</button>\n  </div>\n\n  <!-- Analytics Content -->\n  <div class=\"analytics-content\" *ngIf=\"!isLoading && !error\">\n    <kendo-panelbar [keepItemContent]=\"true\">\n      <!-- Summary Cards -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-tachometer-alt\"></i> Overview\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"summary-cards\">\n      <div class=\"summary-card\">\n        <div class=\"card-icon prompts\">\n          <i class=\"fas fa-microchip\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Prompts</h3>\n          <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"promptMetrics.statusBreakdown.failed > 0\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon actions\">\n          <i class=\"fas fa-cog\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Actions</h3>\n          <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"actionMetrics.statusBreakdown.failed > 0\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon cost\">\n          <i class=\"fas fa-dollar-sign\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Cost</h3>\n          <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon time\">\n          <i class=\"fas fa-clock\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Execution Time</h3>\n          <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ timelineMetrics.totalSteps }} total steps</span>\n          </div>\n        </div>\n      </div>\n    </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Prompt Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-microchip\"></i> Prompt Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n        <!-- View Mode Toggle -->\n        <div class=\"view-mode-toggle\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  size=\"small\"\n                  (click)=\"toggleViewMode()\">\n            <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n            {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n          </button>\n        </div>\n        \n        <!-- No prompts message -->\n        <div class=\"no-data-message\" *ngIf=\"promptMetrics.totalCount === 0\">\n          <i class=\"fas fa-info-circle\"></i>\n          <p>No prompt executions found in this agent run.</p>\n          <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n        </div>\n\n        <div class=\"charts-grid\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Model Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n                <div class=\"chart-legend\" *ngIf=\"promptMetrics.byModel.size > 0\">\n                  <div class=\"legend-item\" *ngFor=\"let item of promptMetrics.byModel | keyvalue\">\n                    <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n                    <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Execution Time by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n              <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"executionTimeChart\" #executionTimeChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Cost by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n              <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"costByVendorChart\" #costByVendorChart></div>\n                <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n              <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Additional Prompt Analytics Charts -->\n        <div class=\"charts-grid\" style=\"margin-top: 20px;\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Prompt Execution Time Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n              <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n              <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Cost Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Count by Name -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n              <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Prompt Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Prompt Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"promptDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Prompt Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Total Time</th>\n                  <th>Success Rate</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let prompt of promptMetrics.byPrompt | keyvalue\">\n                  <td>{{ prompt.key }}</td>\n                  <td>{{ prompt.value.count }}</td>\n                  <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n                  <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\">\n                      <!-- Calculate success rate for this prompt -->\n                      {{ calculatePromptSuccessRate(prompt.key) }}%\n                    </span>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Action Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-cog\"></i> Action Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"charts-grid\">\n          <!-- Action Success Rate -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n              <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Step Type Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n              <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"stepTypeChart\" #stepTypeChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Action Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Action Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"actionDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Action Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Success Rate</th>\n                  <th>Type</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let action of actionMetrics.byAction | keyvalue\">\n                  <td>{{ action.key }}</td>\n                  <td>{{ action.value.count }}</td>\n                  <td>{{ formatDuration(action.value.avgTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\" \n                                                [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n                                                [class.low]=\"action.value.successRate <= 0.7\">\n                      {{ (action.value.successRate * 100).toFixed(1) }}%\n                    </span>\n                  </td>\n                  <td>{{ getActionType(action.key) }}</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        <!-- Error Analysis -->\n        <div class=\"error-analysis-section\">\n          <div class=\"error-analysis\" *ngIf=\"actionMetrics.errorAnalysis.size > 0\">\n          <h3>\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Common Errors\n          </h3>\n          <p class=\"error-analysis-description\">\n            This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n          </p>\n          <div class=\"error-list\">\n            <div class=\"error-item\" *ngFor=\"let error of getTopErrors()\">\n              <span class=\"error-count\">{{ error.count }}x</span>\n              <span class=\"error-message\">{{ error.message }}</span>\n            </div>\n          </div>\n        </div>\n          <div class=\"no-errors\" *ngIf=\"actionMetrics.errorAnalysis.size === 0\">\n            <i class=\"fas fa-check-circle\"></i>\n            <p>No action errors detected in this run. All actions completed successfully!</p>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Model Performance Comparison -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"model-comparison\">\n          <table>\n            <thead>\n              <tr>\n                <th>Model</th>\n                <th>Vendor</th>\n                <th>Prompts</th>\n                <th>Avg Time</th>\n                <th>Total Cost</th>\n                <th>Avg Cost/Prompt</th>\n                <th>Input Tokens</th>\n                <th>Output Tokens</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let model of getModelPerformanceData()\">\n                <td>{{ model.name }}</td>\n                <td>{{ model.vendor }}</td>\n                <td>{{ model.count }}</td>\n                <td>{{ formatDuration(model.avgTime) }}</td>\n                <td>{{ formatCost(model.totalCost) }}</td>\n                <td>{{ formatCost(model.avgCost) }}</td>\n                <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n                <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Timeline Analysis -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"timeline-stats\">\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Total Steps</span>\n            <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Parallel Executions</span>\n            <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Max Nesting Depth</span>\n            <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Sub-Agent Runs</span>\n            <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n          </div>\n        </div>\n\n        <div class=\"step-breakdown\">\n          <h3>Steps by Type</h3>\n          <div class=\"step-type-list\">\n            <div class=\"step-type-item\" *ngFor=\"let type of timelineMetrics.stepsByType | keyvalue\">\n              <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n              <span class=\"type-name\">{{ type.key }}</span>\n              <span class=\"type-count\">{{ type.value }}</span>\n              <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n            </div>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n    </kendo-panelbar>\n  </div>\n</div>", styles: [".analytics-container {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state i,\n.error-state i {\n  margin-bottom: 15px;\n}\n\n.error-state {\n  color: #dc3545;\n}\n\n/* Summary Cards */\n.summary-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail .success {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail .failed {\n  color: #dc3545;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n  padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n/* Charts */\n.charts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header h3 i {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn:hover {\n  color: #495057;\n}\n\n.chart-card-body {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded .chart-card-body {\n  padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n  min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container {\n  position: relative;\n}\n\n.chart-container h3 {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container > div {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics button {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n  margin-right: 8px;\n}\n\n.metrics-table {\n  overflow-x: auto;\n}\n\n.metrics-table table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table tr:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate {\n  font-weight: 500;\n}\n\n.success-rate.high {\n  color: #28a745;\n}\n\n.success-rate.medium {\n  color: #ffc107;\n}\n\n.success-rate.low {\n  color: #dc3545;\n}\n\n/* Error Analysis */\n.error-analysis {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis h3 {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message {\n  flex: 1;\n  color: #495057;\n}\n\n/* No errors state */\n.no-errors {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors i {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message p {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message p.small {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n/* Model Comparison Table */\n.model-comparison {\n  overflow-x: auto;\n}\n\n.model-comparison table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison tr:hover {\n  background-color: #f8f9fa;\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown h3 {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item i {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .summary-cards {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIAgentRunCostService }], { agentRunId: [{
             type: Input
         }], modelDistributionChart: [{
             type: ViewChild,
@@ -2087,5 +2103,5 @@ export class AIAgentRunAnalyticsComponent {
             type: ViewChild,
             args: ['promptCountByNameChart', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 68 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map