@memberjunction/ng-core-entity-forms 5.38.0 → 5.40.0

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

@@ -1,7 +1,7 @@
 import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { RunView } from '@memberjunction/core';
-import { UUIDsEqual } from '@memberjunction/global';
+import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import * as d3 from 'd3';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
@@ -42,7 +42,7 @@ function AIAgentRunAnalyticsComponent_Conditional_2_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
 function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 63);
+    i0.ɵɵelement(0, "i", 67);
     i0.ɵɵtext(1, " Overview ");
 } }
 function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
@@ -63,15 +63,64 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_27_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.failed, " failed");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_51_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("incl. ", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.tokenUsage.totalCacheRead + ctx_r1.promptMetrics.tokenUsage.totalCacheWrite), " cached");
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("input ", ctx_r1.formatCost(ctx_r1.inputCost), " \u00B7 output ", ctx_r1.formatCost(ctx_r1.outputCost));
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("saved ", ctx_r1.formatCost(ctx_r1.cacheSavings), " (", i0.ɵɵpipeBind2(2, 2, ctx_r1.cacheSavingsPct, "1.0-0"), "%) via cache");
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.tokenUsage.totalCacheWrite), " written");
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(2, 1, ctx_r1.cacheHitRatePct, "1.0-0"), "% hit rate");
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_69_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 22);
     i0.ɵɵtext(1, " Prompt Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "button", 40);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_53_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
-    i0.ɵɵelement(2, "i", 41);
+    i0.ɵɵelementStart(0, "div", 38)(1, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    i0.ɵɵelement(2, "i", 44);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -81,20 +130,20 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_53_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_54_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "i", 64);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No prompt executions found in this agent run.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 65);
+    i0.ɵɵelementStart(4, "p", 69);
     i0.ɵɵtext(5, "This agent run may have only executed actions without any AI prompts.");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵelement(1, "span", 75);
-    i0.ɵɵelementStart(2, "span", 76);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵelement(1, "span", 79);
+    i0.ɵɵelementStart(2, "span", 80);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -105,9 +154,9 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate3("", item_r6.key, ": ", item_r6.value.count, " (", (item_r6.value.count / ctx_r1.promptMetrics.totalCount * 100).toFixed(1), "%)");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵrepeaterCreate(1, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_12_For_2_Template, 4, 5, "div", 74, i0.ɵɵcomponentInstance().trackByKey, true);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵrepeaterCreate(1, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_For_2_Template, 4, 5, "div", 78, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(3, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -115,152 +164,168 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_1
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(3, 0, ctx_r1.promptMetrics.byModel));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 43)(2, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("modelDistribution")); });
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 46)(2, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("modelDistribution")); });
     i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵelement(4, "i", 66);
+    i0.ɵɵelement(4, "i", 70);
     i0.ɵɵtext(5, " Prompts by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 46);
-    i0.ɵɵelement(7, "i", 41);
+    i0.ɵɵelementStart(6, "button", 49);
+    i0.ɵɵelement(7, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 47)(9, "div", 48);
-    i0.ɵɵelement(10, "div", 67, 2);
-    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Conditional_12_Template, 4, 2, "div", 68);
+    i0.ɵɵelementStart(8, "div", 51)(9, "div", 52);
+    i0.ɵɵelement(10, "div", 71, 2);
+    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_Template, 4, 2, "div", 72);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 43)(14, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("executionTime")); });
+    i0.ɵɵelementStart(13, "div", 46)(14, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("executionTime")); });
     i0.ɵɵelementStart(15, "h3");
-    i0.ɵɵelement(16, "i", 33);
+    i0.ɵɵelement(16, "i", 36);
     i0.ɵɵtext(17, " Average Execution Time by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 46);
-    i0.ɵɵelement(19, "i", 41);
+    i0.ɵɵelementStart(18, "button", 49);
+    i0.ɵɵelement(19, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 47)(21, "div", 48);
-    i0.ɵɵelement(22, "div", 69, 3);
+    i0.ɵɵelementStart(20, "div", 51)(21, "div", 52);
+    i0.ɵɵelement(22, "div", 73, 3);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 43)(25, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("costByVendor")); });
+    i0.ɵɵelementStart(24, "div", 46)(25, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("costByVendor")); });
     i0.ɵɵelementStart(26, "h3");
     i0.ɵɵelement(27, "i", 31);
     i0.ɵɵtext(28, " Cost Distribution by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "button", 46);
-    i0.ɵɵelement(30, "i", 41);
+    i0.ɵɵelementStart(29, "button", 49);
+    i0.ɵɵelement(30, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 47)(32, "div", 48);
-    i0.ɵɵelement(33, "div", 70, 4);
-    i0.ɵɵelementStart(35, "div", 71);
+    i0.ɵɵelementStart(31, "div", 51)(32, "div", 52);
+    i0.ɵɵelement(33, "div", 74, 4);
+    i0.ɵɵelementStart(35, "div", 75);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(37, "div", 43)(38, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("tokenUsage")); });
+    i0.ɵɵelementStart(37, "div", 46)(38, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("tokenUsage")); });
     i0.ɵɵelementStart(39, "h3");
-    i0.ɵɵelement(40, "i", 72);
+    i0.ɵɵelement(40, "i", 76);
     i0.ɵɵtext(41, " Token Usage by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "button", 46);
-    i0.ɵɵelement(43, "i", 41);
+    i0.ɵɵelementStart(42, "button", 49);
+    i0.ɵɵelement(43, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 47)(45, "div", 48);
-    i0.ɵɵelement(46, "div", 73, 5);
+    i0.ɵɵelementStart(44, "div", 51)(45, "div", 52);
+    i0.ɵɵelement(46, "div", 77, 5);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["modelDistribution"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["modelDistribution"] ? "Collapse Model Distribution chart" : "Expand Model Distribution chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["modelDistribution"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(ctx_r1.promptMetrics.byModel.size > 0 ? 12 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["executionTime"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["executionTime"] ? "Collapse Average Execution Time by Vendor chart" : "Expand Average Execution Time by Vendor chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["executionTime"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["costByVendor"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["costByVendor"] ? "Collapse Cost Distribution by Vendor chart" : "Expand Cost Distribution by Vendor chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["costByVendor"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("Total: ", ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost));
     i0.ɵɵadvance();
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["tokenUsage"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["tokenUsage"] ? "Collapse Token Usage by Model chart" : "Expand Token Usage by Model chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["tokenUsage"] ? "fa-compress" : "fa-expand");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 43)(2, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptTime")); });
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 46)(2, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptTime")); });
     i0.ɵɵelementStart(3, "h3");
-    i0.ɵɵelement(4, "i", 77);
+    i0.ɵɵelement(4, "i", 81);
     i0.ɵɵtext(5, " Average Execution Time by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 46);
-    i0.ɵɵelement(7, "i", 41);
+    i0.ɵɵelementStart(6, "button", 49);
+    i0.ɵɵelement(7, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 47)(9, "div", 48);
-    i0.ɵɵelement(10, "div", 78, 6);
+    i0.ɵɵelementStart(8, "div", 51)(9, "div", 52);
+    i0.ɵɵelement(10, "div", 82, 6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 43)(13, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptToken")); });
+    i0.ɵɵelementStart(12, "div", 46)(13, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptToken")); });
     i0.ɵɵelementStart(14, "h3");
-    i0.ɵɵelement(15, "i", 79);
+    i0.ɵɵelement(15, "i", 83);
     i0.ɵɵtext(16, " Token Usage by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 46);
-    i0.ɵɵelement(18, "i", 41);
+    i0.ɵɵelementStart(17, "button", 49);
+    i0.ɵɵelement(18, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 47)(20, "div", 48);
-    i0.ɵɵelement(21, "div", 80, 7);
+    i0.ɵɵelementStart(19, "div", 51)(20, "div", 52);
+    i0.ɵɵelement(21, "div", 84, 7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 43)(24, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCost")); });
+    i0.ɵɵelementStart(23, "div", 46)(24, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCost")); });
     i0.ɵɵelementStart(25, "h3");
-    i0.ɵɵelement(26, "i", 66);
+    i0.ɵɵelement(26, "i", 70);
     i0.ɵɵtext(27, " Cost Distribution by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "button", 46);
-    i0.ɵɵelement(29, "i", 41);
+    i0.ɵɵelementStart(28, "button", 49);
+    i0.ɵɵelement(29, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 47)(31, "div", 48);
-    i0.ɵɵelement(32, "div", 81, 8);
+    i0.ɵɵelementStart(30, "div", 51)(31, "div", 52);
+    i0.ɵɵelement(32, "div", 85, 8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 43)(35, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template_div_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCount")); });
+    i0.ɵɵelementStart(34, "div", 46)(35, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCount")); });
     i0.ɵɵelementStart(36, "h3");
-    i0.ɵɵelement(37, "i", 82);
+    i0.ɵɵelement(37, "i", 86);
     i0.ɵɵtext(38, " Prompt Execution Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "button", 46);
-    i0.ɵɵelement(40, "i", 41);
+    i0.ɵɵelementStart(39, "button", 49);
+    i0.ɵɵelement(40, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "div", 47)(42, "div", 48);
-    i0.ɵɵelement(43, "div", 83, 9);
+    i0.ɵɵelementStart(41, "div", 51)(42, "div", 52);
+    i0.ɵɵelement(43, "div", 87, 9);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptTime"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["promptTime"] ? "Collapse Average Execution Time by Prompt chart" : "Expand Average Execution Time by Prompt chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptTime"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptToken"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["promptToken"] ? "Collapse Token Usage by Prompt chart" : "Expand Token Usage by Prompt chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptToken"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptCost"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["promptCost"] ? "Collapse Cost Distribution by Prompt chart" : "Expand Cost Distribution by Prompt chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCost"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptCount"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["promptCount"] ? "Collapse Prompt Execution Count chart" : "Expand Prompt Execution Count chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCount"] ? "fa-compress" : "fa-expand");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -273,7 +338,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_For_16_Templa
     i0.ɵɵelementStart(7, "td");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td")(10, "span", 84);
+    i0.ɵɵelementStart(9, "td")(10, "span", 88);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -290,8 +355,8 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_For_16_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "table")(2, "thead")(3, "tr")(4, "th");
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "table")(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Prompt Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -307,7 +372,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_Template(rf,
     i0.ɵɵtext(13, "Success Rate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -315,11 +380,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.promptMetrics.byPrompt));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_63_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_81_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 29);
     i0.ɵɵtext(1, " Action Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -329,7 +394,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_For_16_Templa
     i0.ɵɵelementStart(5, "td");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td")(8, "span", 84);
+    i0.ɵɵelementStart(7, "td")(8, "span", 88);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "td");
@@ -351,8 +416,8 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_For_16_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r9.key));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "table")(2, "thead")(3, "tr")(4, "th");
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "table")(2, "thead")(3, "tr")(4, "th");
     i0.ɵɵtext(5, "Action Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "th");
@@ -368,7 +433,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_Template(rf,
     i0.ɵɵtext(13, "Type");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -376,11 +441,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.actionMetrics.byAction));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_94_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88)(1, "span", 89);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92)(1, "span", 93);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 90);
+    i0.ɵɵelementStart(3, "span", 94);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -390,34 +455,34 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_94_For_8_Templat
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(error_r10.message);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_94_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "h3");
-    i0.ɵɵelement(2, "i", 85);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "h3");
+    i0.ɵɵelement(2, "i", 89);
     i0.ɵɵtext(3, " Common Errors ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 86);
+    i0.ɵɵelementStart(4, "p", 90);
     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", 87);
-    i0.ɵɵrepeaterCreate(7, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_94_For_8_Template, 5, 2, "div", 88, i0.ɵɵcomponentInstance().trackByErrorMessage, true);
+    i0.ɵɵelementStart(6, "div", 91);
+    i0.ɵɵrepeaterCreate(7, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_8_Template, 5, 2, "div", 92, i0.ɵɵcomponentInstance().trackByErrorMessage, true);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(7);
     i0.ɵɵrepeater(ctx_r1.getTopErrors());
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_95_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 91);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵelement(1, "i", 95);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No action errors detected in this run. All actions completed successfully!");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_97_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 92);
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_115_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
     i0.ɵɵtext(1, " Model Performance Comparison ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_121_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_For_139_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -464,20 +529,20 @@ function AIAgentRunAnalyticsComponent_Conditional_3_For_121_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r11.outputTokens, "1.0-0"));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_123_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 93);
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_141_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 97);
     i0.ɵɵtext(1, " Execution Timeline Analysis ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_151_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵelement(1, "i", 41);
-    i0.ɵɵelementStart(2, "span", 94);
+function AIAgentRunAnalyticsComponent_Conditional_3_For_169_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "span", 98);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 95);
+    i0.ɵɵelementStart(4, "span", 99);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 96);
+    i0.ɵɵelementStart(6, "span", 100);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -533,133 +598,154 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(34, "div", 24);
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "div", 25)(37, "span");
+    i0.ɵɵelementStart(36, "div", 32)(37, "span");
     i0.ɵɵtext(38);
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(39, "div", 20)(40, "div", 32);
-    i0.ɵɵelement(41, "i", 33);
+    i0.ɵɵpipe(39, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(40, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_40_Template, 3, 3, "span");
+    i0.ɵɵconditionalCreate(41, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template, 2, 2, "span");
+    i0.ɵɵconditionalCreate(42, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template, 3, 5, "span", 26);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(43, "div", 20)(44, "div", 33);
+    i0.ɵɵelement(45, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 23)(43, "h3");
-    i0.ɵɵtext(44, "Execution Time");
+    i0.ɵɵelementStart(46, "div", 23)(47, "h3");
+    i0.ɵɵtext(48, "Prompt Cache");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 24);
-    i0.ɵɵtext(46);
+    i0.ɵɵelementStart(49, "div", 24);
+    i0.ɵɵtext(50);
+    i0.ɵɵpipe(51, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "div", 32)(53, "span");
+    i0.ɵɵtext(54, "tokens read from cache");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(55, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template, 3, 3, "span");
+    i0.ɵɵconditionalCreate(56, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template, 3, 4, "span");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(57, "div", 20)(58, "div", 35);
+    i0.ɵɵelement(59, "i", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "div", 25)(48, "span");
-    i0.ɵɵtext(49);
+    i0.ɵɵelementStart(60, "div", 23)(61, "h3");
+    i0.ɵɵtext(62, "Execution Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(63, "div", 24);
+    i0.ɵɵtext(64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(65, "div", 25)(66, "span");
+    i0.ɵɵtext(67);
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(50, "mj-accordion-panel", 17);
-    i0.ɵɵtemplate(51, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_51_Template, 2, 0, "ng-template", 18);
-    i0.ɵɵelementStart(52, "div", 34);
-    i0.ɵɵconditionalCreate(53, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_53_Template, 4, 2, "div", 35);
-    i0.ɵɵconditionalCreate(54, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_54_Template, 6, 0, "div", 36);
-    i0.ɵɵconditionalCreate(55, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template, 48, 14, "div", 37);
-    i0.ɵɵconditionalCreate(56, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template, 45, 12, "div", 38);
-    i0.ɵɵelementStart(57, "div", 39)(58, "button", 40);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
-    i0.ɵɵelement(59, "i", 41);
-    i0.ɵɵtext(60, " Detailed Prompt Metrics ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(61, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_61_Template, 18, 2, "div", 42);
+    i0.ɵɵelementStart(68, "mj-accordion-panel", 17);
+    i0.ɵɵtemplate(69, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_69_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(70, "div", 37);
+    i0.ɵɵconditionalCreate(71, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template, 4, 2, "div", 38);
+    i0.ɵɵconditionalCreate(72, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template, 6, 0, "div", 39);
+    i0.ɵɵconditionalCreate(73, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template, 48, 18, "div", 40);
+    i0.ɵɵconditionalCreate(74, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template, 45, 16, "div", 41);
+    i0.ɵɵelementStart(75, "div", 42)(76, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_76_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
+    i0.ɵɵelement(77, "i", 44);
+    i0.ɵɵtext(78, " Detailed Prompt Metrics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(79, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template, 18, 2, "div", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(62, "mj-accordion-panel", 17);
-    i0.ɵɵtemplate(63, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_63_Template, 2, 0, "ng-template", 18);
-    i0.ɵɵelementStart(64, "div", 34)(65, "div", 37)(66, "div", 43)(67, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_67_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
-    i0.ɵɵelementStart(68, "h3");
-    i0.ɵɵelement(69, "i", 45);
-    i0.ɵɵtext(70, " Action Success Rate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(71, "button", 46);
-    i0.ɵɵelement(72, "i", 41);
+    i0.ɵɵelementStart(80, "mj-accordion-panel", 17);
+    i0.ɵɵtemplate(81, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_81_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(82, "div", 37)(83, "div", 40)(84, "div", 46)(85, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_85_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
+    i0.ɵɵelementStart(86, "h3");
+    i0.ɵɵelement(87, "i", 48);
+    i0.ɵɵtext(88, " Action Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(89, "button", 49);
+    i0.ɵɵelement(90, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(73, "div", 47)(74, "div", 48);
-    i0.ɵɵelement(75, "div", 49, 0);
+    i0.ɵɵelementStart(91, "div", 51)(92, "div", 52);
+    i0.ɵɵelement(93, "div", 53, 0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(77, "div", 43)(78, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_78_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
-    i0.ɵɵelementStart(79, "h3");
-    i0.ɵɵelement(80, "i", 50);
-    i0.ɵɵtext(81, " Step Type Distribution");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(82, "button", 46);
-    i0.ɵɵelement(83, "i", 41);
+    i0.ɵɵelementStart(95, "div", 46)(96, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_96_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
+    i0.ɵɵelementStart(97, "h3");
+    i0.ɵɵelement(98, "i", 54);
+    i0.ɵɵtext(99, " Step Type Distribution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(100, "button", 49);
+    i0.ɵɵelement(101, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(84, "div", 47)(85, "div", 48);
-    i0.ɵɵelement(86, "div", 51, 1);
+    i0.ɵɵelementStart(102, "div", 51)(103, "div", 52);
+    i0.ɵɵelement(104, "div", 55, 1);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(88, "div", 39)(89, "button", 40);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_89_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
-    i0.ɵɵelement(90, "i", 41);
-    i0.ɵɵtext(91, " Detailed Action Metrics ");
+    i0.ɵɵelementStart(106, "div", 42)(107, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_107_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
+    i0.ɵɵelement(108, "i", 44);
+    i0.ɵɵtext(109, " Detailed Action Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(92, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_92_Template, 18, 2, "div", 42);
+    i0.ɵɵconditionalCreate(110, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template, 18, 2, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(93, "div", 52);
-    i0.ɵɵconditionalCreate(94, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_94_Template, 9, 0, "div", 53);
-    i0.ɵɵconditionalCreate(95, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_95_Template, 4, 0, "div", 54);
+    i0.ɵɵelementStart(111, "div", 56);
+    i0.ɵɵconditionalCreate(112, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template, 9, 0, "div", 57);
+    i0.ɵɵconditionalCreate(113, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template, 4, 0, "div", 58);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(96, "mj-accordion-panel", 17);
-    i0.ɵɵtemplate(97, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_97_Template, 2, 0, "ng-template", 18);
-    i0.ɵɵelementStart(98, "div", 34)(99, "div", 55)(100, "table")(101, "thead")(102, "tr")(103, "th");
-    i0.ɵɵtext(104, "Model");
+    i0.ɵɵelementStart(114, "mj-accordion-panel", 17);
+    i0.ɵɵtemplate(115, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_115_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(116, "div", 37)(117, "div", 59)(118, "table")(119, "thead")(120, "tr")(121, "th");
+    i0.ɵɵtext(122, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(105, "th");
-    i0.ɵɵtext(106, "Vendor");
+    i0.ɵɵelementStart(123, "th");
+    i0.ɵɵtext(124, "Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(107, "th");
-    i0.ɵɵtext(108, "Prompts");
+    i0.ɵɵelementStart(125, "th");
+    i0.ɵɵtext(126, "Prompts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(109, "th");
-    i0.ɵɵtext(110, "Avg Time");
+    i0.ɵɵelementStart(127, "th");
+    i0.ɵɵtext(128, "Avg Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(111, "th");
-    i0.ɵɵtext(112, "Total Cost");
+    i0.ɵɵelementStart(129, "th");
+    i0.ɵɵtext(130, "Total Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(113, "th");
-    i0.ɵɵtext(114, "Avg Cost/Prompt");
+    i0.ɵɵelementStart(131, "th");
+    i0.ɵɵtext(132, "Avg Cost/Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(115, "th");
-    i0.ɵɵtext(116, "Input Tokens");
+    i0.ɵɵelementStart(133, "th");
+    i0.ɵɵtext(134, "Input Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(117, "th");
-    i0.ɵɵtext(118, "Output Tokens");
+    i0.ɵɵelementStart(135, "th");
+    i0.ɵɵtext(136, "Output Tokens");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(119, "tbody");
-    i0.ɵɵrepeaterCreate(120, AIAgentRunAnalyticsComponent_Conditional_3_For_121_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
+    i0.ɵɵelementStart(137, "tbody");
+    i0.ɵɵrepeaterCreate(138, AIAgentRunAnalyticsComponent_Conditional_3_For_139_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(122, "mj-accordion-panel", 17);
-    i0.ɵɵtemplate(123, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_123_Template, 2, 0, "ng-template", 18);
-    i0.ɵɵelementStart(124, "div", 34)(125, "div", 56)(126, "div", 57)(127, "span", 58);
-    i0.ɵɵtext(128, "Total Steps");
+    i0.ɵɵelementStart(140, "mj-accordion-panel", 17);
+    i0.ɵɵtemplate(141, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_141_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(142, "div", 37)(143, "div", 60)(144, "div", 61)(145, "span", 62);
+    i0.ɵɵtext(146, "Total Steps");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(129, "span", 59);
-    i0.ɵɵtext(130);
+    i0.ɵɵelementStart(147, "span", 63);
+    i0.ɵɵtext(148);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(131, "div", 57)(132, "span", 58);
-    i0.ɵɵtext(133, "Parallel Executions");
+    i0.ɵɵelementStart(149, "div", 61)(150, "span", 62);
+    i0.ɵɵtext(151, "Parallel Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(134, "span", 59);
-    i0.ɵɵtext(135);
+    i0.ɵɵelementStart(152, "span", 63);
+    i0.ɵɵtext(153);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(136, "div", 57)(137, "span", 58);
-    i0.ɵɵtext(138, "Max Nesting Depth");
+    i0.ɵɵelementStart(154, "div", 61)(155, "span", 62);
+    i0.ɵɵtext(156, "Max Nesting Depth");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(139, "span", 59);
-    i0.ɵɵtext(140);
+    i0.ɵɵelementStart(157, "span", 63);
+    i0.ɵɵtext(158);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(141, "div", 57)(142, "span", 58);
-    i0.ɵɵtext(143, "Sub-Agent Runs");
+    i0.ɵɵelementStart(159, "div", 61)(160, "span", 62);
+    i0.ɵɵtext(161, "Sub-Agent Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(144, "span", 59);
-    i0.ɵɵtext(145);
+    i0.ɵɵelementStart(162, "span", 63);
+    i0.ɵɵtext(163);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(146, "div", 60)(147, "h3");
-    i0.ɵɵtext(148, "Steps by Type");
+    i0.ɵɵelementStart(164, "div", 64)(165, "h3");
+    i0.ɵɵtext(166, "Steps by Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(149, "div", 61);
-    i0.ɵɵrepeaterCreate(150, AIAgentRunAnalyticsComponent_Conditional_3_For_151_Template, 8, 4, "div", 62, i0.ɵɵcomponentInstance().trackByKey, true);
-    i0.ɵɵpipe(152, "keyvalue");
+    i0.ɵɵelementStart(167, "div", 65);
+    i0.ɵɵrepeaterCreate(168, AIAgentRunAnalyticsComponent_Conditional_3_For_169_Template, 8, 4, "div", 66, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵpipe(170, "keyvalue");
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -680,7 +766,19 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.tokenUsage.totalInput + ctx_r1.promptMetrics.tokenUsage.totalOutput, " tokens");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(39, 43, ctx_r1.totalTokensProcessed), " tokens");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 40 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.inputCost > 0 || ctx_r1.outputCost > 0 ? 41 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.cacheSavings > 0 ? 42 : -1);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(51, 45, ctx_r1.promptMetrics.tokenUsage.totalCacheRead));
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 55 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 56 : -1);
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.promptMetrics.totalExecutionTime + ctx_r1.actionMetrics.totalExecutionTime));
     i0.ɵɵadvance(3);
@@ -688,35 +786,39 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 53 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 71 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 54 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 72 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 55 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 73 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 56 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 74 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.promptDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 61 : -1);
+    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 79 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["actionSuccess"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["actionSuccess"] ? "Collapse Action Success Rate chart" : "Expand Action Success Rate chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["actionSuccess"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["stepType"]);
-    i0.ɵɵadvance(6);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.expandedCharts["stepType"] ? "Collapse Step Type Distribution chart" : "Expand Step Type Distribution chart");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["stepType"] ? "fa-compress" : "fa-expand");
     i0.ɵɵadvance(7);
     i0.ɵɵproperty("ngClass", ctx_r1.actionDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionDetailsExpanded ? 92 : -1);
+    i0.ɵɵconditional(ctx_r1.actionDetailsExpanded ? 110 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 94 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 112 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 95 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 113 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(24);
@@ -732,7 +834,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.subAgentRuns.length);
     i0.ɵɵadvance(5);
-    i0.ɵɵrepeater(i0.ɵɵpipeBind1(152, 35, ctx_r1.timelineMetrics.stepsByType));
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(170, 47, ctx_r1.timelineMetrics.stepsByType));
 } }
 export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
     /** Helper method to create tracked setTimeout calls */
@@ -752,6 +854,9 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             this.activeTimeouts.splice(index, 1);
         }
     }
+    static { this.UNIT_DIVISORS = {
+        'Per Million Tokens': 1_000_000, 'Per Hundred Thousand Tokens': 100_000, 'Per Thousand Tokens': 1_000
+    }; }
     constructor(cdr, costService) {
         super();
         this.cdr = cdr;
@@ -779,6 +884,8 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
         // Data
         this.agentRun = null;
         this.allPromptRuns = [];
+        // Per model+vendor cache pricing (currency-per-token), loaded from AIModelCost for the cost split.
+        this.cacheRates = new Map();
         this.allActionLogs = [];
         this.allSteps = [];
         this.subAgentRuns = [];
@@ -942,6 +1049,8 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
         }
         // Load all prompt runs for the agent run hierarchy
         this.allPromptRuns = await this.loadAllPromptRuns(agentRunIds);
+        // Load cache pricing so cost can be split (input/output) and cache savings computed
+        await this.loadCacheRates();
         if (results[2].Success) {
             const actionSteps = results[2].Results || [];
             // Now load the actual action logs
@@ -973,8 +1082,8 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             byVendor: new Map(),
             byPrompt: new Map(),
             statusBreakdown: { success: 0, failed: 0, timeout: 0 },
-            costBreakdown: { totalCost: 0, byModel: new Map(), byVendor: new Map() },
-            tokenUsage: { totalInput: 0, totalOutput: 0, byModel: new Map() }
+            costBreakdown: { totalCost: 0, byModel: new Map(), byVendor: new Map(), inputCost: 0, outputCost: 0, savings: 0, unratedCost: 0 },
+            tokenUsage: { totalInput: 0, totalOutput: 0, totalCacheRead: 0, totalCacheWrite: 0, byModel: new Map() }
         };
     }
     initializeActionMetrics() {
@@ -997,6 +1106,33 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             criticalPath: { steps: [], totalTime: 0 }
         };
     }
+    /** Stable rate-map key for a model+vendor pair. */
+    rateKey(modelID, vendorID) {
+        return `${NormalizeUUID(modelID ?? '')}|${NormalizeUUID(vendorID ?? '')}`;
+    }
+    /** Load active realtime AIModelCost rates and normalize each to currency-per-token. */
+    async loadCacheRates() {
+        this.cacheRates.clear();
+        const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+        const res = await rv.RunView({
+            EntityName: 'MJ: AI Model Costs',
+            ExtraFilter: `Status='Active' AND ProcessingType='Realtime'`,
+            Fields: ['ModelID', 'VendorID', 'InputPricePerUnit', 'OutputPricePerUnit', 'CacheReadPricePerUnit', 'CacheWritePricePerUnit', 'UnitType'],
+            ResultType: 'simple'
+        });
+        if (!res.Success)
+            return;
+        for (const row of res.Results || []) {
+            const divisor = AIAgentRunAnalyticsComponent.UNIT_DIVISORS[row.UnitType ?? ''] ?? 1_000_000;
+            const input = (row.InputPricePerUnit ?? 0) / divisor;
+            this.cacheRates.set(this.rateKey(row.ModelID, row.VendorID), {
+                inputRate: input,
+                outputRate: (row.OutputPricePerUnit ?? 0) / divisor,
+                cacheReadRate: (row.CacheReadPricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor,
+                cacheWriteRate: (row.CacheWritePricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor
+            });
+        }
+    }
     calculatePromptMetrics() {
         const metrics = this.initializePromptMetrics();
         for (const promptRun of this.allPromptRuns) {
@@ -1047,6 +1183,24 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             const outputTokens = promptRun.TokensCompletion || 0;
             metrics.tokenUsage.totalInput += inputTokens;
             metrics.tokenUsage.totalOutput += outputTokens;
+            // Provider prompt-cache tokens (read = cache hits, write = cache creation). Summed from the
+            // child prompt runs' persisted TokensCacheRead/TokensCacheWrite columns.
+            const cacheReadTokens = promptRun.TokensCacheRead || 0;
+            const cacheWriteTokens = promptRun.TokensCacheWrite || 0;
+            metrics.tokenUsage.totalCacheRead += cacheReadTokens;
+            metrics.tokenUsage.totalCacheWrite += cacheWriteTokens;
+            // Rate-derived cost split + cache savings. inputCost folds uncached + cache read + cache write
+            // (each at its own rate); savings = the discount vs. pricing all input at the full input rate.
+            // Runs whose model+vendor has no rate row are tracked separately so the split isn't silently off.
+            const rate = this.cacheRates.get(this.rateKey(promptRun.ModelID, promptRun.VendorID));
+            if (rate) {
+                metrics.costBreakdown.inputCost += inputTokens * rate.inputRate + cacheReadTokens * rate.cacheReadRate + cacheWriteTokens * rate.cacheWriteRate;
+                metrics.costBreakdown.outputCost += outputTokens * rate.outputRate;
+                metrics.costBreakdown.savings += cacheReadTokens * (rate.inputRate - rate.cacheReadRate) + cacheWriteTokens * (rate.inputRate - rate.cacheWriteRate);
+            }
+            else {
+                metrics.costBreakdown.unratedCost += cost;
+            }
             const modelTokens = metrics.tokenUsage.byModel.get(model) || { input: 0, output: 0 };
             modelTokens.input += inputTokens;
             modelTokens.output += outputTokens;
@@ -1229,6 +1383,29 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             return `$${cost.toFixed(3)}`;
         return `$${cost.toFixed(2)}`;
     }
+    /** Total tokens the models processed across this run, including cached input (true throughput). */
+    get totalTokensProcessed() {
+        const u = this.promptMetrics.tokenUsage;
+        return u.totalInput + u.totalOutput + u.totalCacheRead + u.totalCacheWrite;
+    }
+    /** Rate-derived input-side dollars (uncached + cache read + cache write). */
+    get inputCost() { return this.promptMetrics.costBreakdown.inputCost; }
+    /** Rate-derived output dollars. */
+    get outputCost() { return this.promptMetrics.costBreakdown.outputCost; }
+    /** Net dollars saved by caching vs. pricing all input at the full input rate. */
+    get cacheSavings() { return this.promptMetrics.costBreakdown.savings; }
+    /** Savings as a % of what the run would have cost with no caching. */
+    get cacheSavingsPct() {
+        const cb = this.promptMetrics.costBreakdown;
+        const fullPrice = cb.totalCost + cb.savings;
+        return fullPrice > 0 ? (cb.savings / fullPrice) * 100 : 0;
+    }
+    /** Percentage of input tokens served from the provider's prompt cache across this agent run. */
+    get cacheHitRatePct() {
+        const u = this.promptMetrics.tokenUsage;
+        const totalInput = u.totalInput + u.totalCacheRead + u.totalCacheWrite;
+        return totalInput > 0 ? (u.totalCacheRead / totalInput) * 100 : 0;
+    }
     refresh() {
         this.loadData();
     }
@@ -2130,11 +2307,11 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [["actionSuccessRateChart", ""], ["stepTypeChart", ""], ["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], [1, "analytics-container"], [1, "loading-state"], [1, "error-state"], [1, "analytics-content"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["mjButton", "", 3, "click"], [3, "Expanded"], ["mjAccordionTitle", ""], [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"], [1, "failed"], [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, "analytics-panel"], [1, "view-mode-toggle"], [1, "no-data-message"], [1, "charts-grid"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "detailed-metrics"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fas", 3, "ngClass"], [1, "metrics-table"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-bar"], [1, "expand-btn"], [1, "chart-card-body"], [1, "chart-container"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], [1, "error-analysis"], [1, "no-errors"], [1, "model-comparison"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], [1, "step-type-item"], [1, "fas", "fa-tachometer-alt"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "fas", "fa-chart-pie"], ["id", "modelDistributionChart"], [1, "chart-legend"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "success-rate"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-stream"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { agentRunId: "agentRunId" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [["actionSuccessRateChart", ""], ["stepTypeChart", ""], ["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], [1, "analytics-container"], [1, "loading-state"], [1, "error-state"], [1, "analytics-content"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["mjButton", "", 3, "click"], [3, "Expanded"], ["mjAccordionTitle", ""], [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"], [1, "failed"], [1, "card-icon", "actions"], [1, "fas", "fa-cog"], [1, "card-icon", "cost"], [1, "fas", "fa-dollar-sign"], [1, "metric-detail", "cache-detail"], [1, "card-icon", "cache"], [1, "fas", "fa-bolt"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "analytics-panel"], [1, "view-mode-toggle"], [1, "no-data-message"], [1, "charts-grid"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "detailed-metrics"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fas", 3, "ngClass"], [1, "metrics-table"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-bar"], [1, "expand-btn"], ["aria-hidden", "true", 1, "fas", 3, "ngClass"], [1, "chart-card-body"], [1, "chart-container"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], [1, "error-analysis"], [1, "no-errors"], [1, "model-comparison"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], [1, "step-type-item"], [1, "fas", "fa-tachometer-alt"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "fas", "fa-chart-pie"], ["id", "modelDistributionChart"], [1, "chart-legend"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "success-rate"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-stream"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 10);
             i0.ɵɵconditionalCreate(1, AIAgentRunAnalyticsComponent_Conditional_1_Template, 4, 0, "div", 11);
             i0.ɵɵconditionalCreate(2, AIAgentRunAnalyticsComponent_Conditional_2_Template, 6, 1, "div", 12);
-            i0.ɵɵconditionalCreate(3, AIAgentRunAnalyticsComponent_Conditional_3_Template, 153, 37, "div", 13);
+            i0.ɵɵconditionalCreate(3, AIAgentRunAnalyticsComponent_Conditional_3_Template, 171, 49, "div", 13);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -2143,11 +2320,11 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 3 : -1);
-        } }, dependencies: [i2.NgClass, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i2.DecimalPipe, i2.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-status-error);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-inverse);\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.metric-detail[_ngcontent-%COMP%]   .success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .failed[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n  padding: 15px;\n}\n\n\n\n.analytics-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\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: var(--mj-text-muted);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.no-errors[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-status-success);\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: var(--mj-text-muted);\n}\n\n.no-data-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: var(--mj-border-strong);\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: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n  white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 32px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 30px;\n  text-align: center;\n  color: var(--mj-text-muted);\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: var(--mj-text-primary);\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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}"], changeDetection: 0 }); }
+        } }, dependencies: [i2.NgClass, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i2.DecimalPipe, i2.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-status-error);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-inverse);\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n\n.card-icon.cache[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.metric-detail[_ngcontent-%COMP%]   .success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .failed[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.metric-detail.cache-detail[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: block;\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n  padding: 15px;\n}\n\n\n\n.analytics-content[_ngcontent-%COMP%]   mj-accordion-panel[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 12px;\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\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: var(--mj-text-muted);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.no-errors[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-status-success);\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: var(--mj-text-muted);\n}\n\n.no-data-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: var(--mj-border-strong);\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: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n  white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 32px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 30px;\n  text-align: center;\n  color: var(--mj-text-muted);\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: var(--mj-text-primary);\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunAnalyticsComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-run-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"analytics-container\">\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-state\">\n      <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n      <p>Loading analytics data...</p>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-state\">\n      <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n      <p>{{ error }}</p>\n      <button mjButton (click)=\"loadData()\">Retry</button>\n    </div>\n  }\n\n  <!-- Analytics Content -->\n  @if (!isLoading && !error) {\n    <div class=\"analytics-content\">\n        <!-- Summary Cards -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-tachometer-alt\"></i> Overview\n            </ng-template>\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                    @if (promptMetrics.statusBreakdown.failed > 0) {\n                      <span class=\"failed\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n                    }\n                  </div>\n                </div>\n              </div>\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                    @if (actionMetrics.statusBreakdown.failed > 0) {\n                      <span class=\"failed\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n                    }\n                  </div>\n                </div>\n              </div>\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              <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        </mj-accordion-panel>\n        <!-- Prompt Analytics -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-microchip\"></i> Prompt Analytics\n            </ng-template>\n            <div class=\"analytics-panel\">\n              <!-- View Mode Toggle -->\n              @if (promptMetrics.totalCount > 0) {\n                <div class=\"view-mode-toggle\">\n                  <button mjButton\n                    variant=\"flat\"\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              @if (promptMetrics.totalCount === 0) {\n                <div class=\"no-data-message\">\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              @if (promptMetrics.totalCount > 0) {\n                <div class=\"charts-grid\">\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                        @if (promptMetrics.byModel.size > 0) {\n                          <div class=\"chart-legend\">\n                            @for (item of promptMetrics.byModel | keyvalue; track trackByKey($index, item)) {\n                              <div class=\"legend-item\">\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                            }\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  </div>\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                  <!-- 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                  <!-- 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              @if (promptMetrics.totalCount > 0) {\n                <div class=\"charts-grid\" style=\"margin-top: 20px;\">\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                  <!-- 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                  <!-- 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                  <!-- 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 mjButton\n                  variant=\"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                @if (promptDetailsExpanded) {\n                  <div class=\"metrics-table\">\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                        @for (prompt of promptMetrics.byPrompt | keyvalue; track trackByKey($index, prompt)) {\n                          <tr>\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                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Action Analytics -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-cog\"></i> Action Analytics\n            </ng-template>\n            <div class=\"analytics-panel\">\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                <!-- 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              <!-- Detailed Action Metrics -->\n              <div class=\"detailed-metrics\">\n                <button mjButton\n                  variant=\"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                @if (actionDetailsExpanded) {\n                  <div class=\"metrics-table\">\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                        @for (action of actionMetrics.byAction | keyvalue; track trackByKey($index, action)) {\n                          <tr>\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                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n              <!-- Error Analysis -->\n              <div class=\"error-analysis-section\">\n                @if (actionMetrics.errorAnalysis.size > 0) {\n                  <div class=\"error-analysis\">\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                      @for (error of getTopErrors(); track trackByErrorMessage($index, error)) {\n                        <div class=\"error-item\">\n                          <span class=\"error-count\">{{ error.count }}x</span>\n                          <span class=\"error-message\">{{ error.message }}</span>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n                @if (actionMetrics.errorAnalysis.size === 0) {\n                  <div class=\"no-errors\">\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                }\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Model Performance Comparison -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n            </ng-template>\n            <div class=\"analytics-panel\">\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                    @for (model of getModelPerformanceData(); track trackByModelName($index, model)) {\n                      <tr>\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                    }\n                  </tbody>\n                </table>\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Timeline Analysis -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n            </ng-template>\n            <div class=\"analytics-panel\">\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              <div class=\"step-breakdown\">\n                <h3>Steps by Type</h3>\n                <div class=\"step-type-list\">\n                  @for (type of timelineMetrics.stepsByType | keyvalue; track trackByKey($index, type)) {\n                    <div class=\"step-type-item\">\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                  }\n                </div>\n              </div>\n            </div>\n        </mj-accordion-panel>\n    </div>\n  }\n</div>", styles: [".analytics-container {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n}\n\n.loading-state i,\n.error-state i {\n  margin-bottom: 15px;\n}\n\n.error-state {\n  color: var(--mj-status-error);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-inverse);\n}\n\n.card-icon.prompts {\n  background: var(--mj-brand-primary);\n}\n\n.card-icon.actions {\n  background: var(--mj-status-error);\n}\n\n.card-icon.cost {\n  background: var(--mj-status-success);\n}\n\n.card-icon.time {\n  background: var(--mj-status-warning);\n}\n\n.card-content h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.metric-detail {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.metric-detail .success {\n  color: var(--mj-status-success);\n  margin-right: 10px;\n}\n\n.metric-detail .failed {\n  color: var(--mj-status-error);\n}\n\n/* Analytics Panels */\n.analytics-panel {\n  padding: 15px;\n}\n\n/* Accordion Panel Styling */\n.analytics-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 12px;\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header h3 i {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n\n.expand-btn {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.expand-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.chart-card-body {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n  margin-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table td {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table tr:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate {\n  font-weight: 500;\n}\n\n.success-rate.high {\n  color: var(--mj-status-success);\n}\n\n.success-rate.medium {\n  color: var(--mj-status-warning);\n}\n\n.success-rate.low {\n  color: var(--mj-status-error);\n}\n\n/* Error Analysis */\n.error-analysis {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis h3 {\n  margin: 0 0 15px 0;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.no-errors i {\n  font-size: 24px;\n  color: var(--mj-status-success);\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: var(--mj-text-muted);\n}\n\n.no-data-message i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: var(--mj-border-strong);\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: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n  white-space: nowrap;\n}\n\n.model-comparison td {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison tr:hover {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.stat-value {\n  font-size: 32px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.step-breakdown h3 {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item i {\n  width: 30px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.type-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.type-percentage {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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}"] }]
+        args: [{ standalone: false, selector: 'mj-ai-agent-run-analytics', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"analytics-container\">\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-state\">\n      <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n      <p>Loading analytics data...</p>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-state\">\n      <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n      <p>{{ error }}</p>\n      <button mjButton (click)=\"loadData()\">Retry</button>\n    </div>\n  }\n\n  <!-- Analytics Content -->\n  @if (!isLoading && !error) {\n    <div class=\"analytics-content\">\n        <!-- Summary Cards -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-tachometer-alt\"></i> Overview\n            </ng-template>\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                    @if (promptMetrics.statusBreakdown.failed > 0) {\n                      <span class=\"failed\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n                    }\n                  </div>\n                </div>\n              </div>\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                    @if (actionMetrics.statusBreakdown.failed > 0) {\n                      <span class=\"failed\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n                    }\n                  </div>\n                </div>\n              </div>\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 cache-detail\">\n                    <span>{{ totalTokensProcessed | number }} tokens</span>\n                    @if (promptMetrics.tokenUsage.totalCacheRead > 0 || promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>incl. {{ (promptMetrics.tokenUsage.totalCacheRead + promptMetrics.tokenUsage.totalCacheWrite) | number }} cached</span>\n                    }\n                    @if (inputCost > 0 || outputCost > 0) {\n                      <span>input {{ formatCost(inputCost) }} &middot; output {{ formatCost(outputCost) }}</span>\n                    }\n                    @if (cacheSavings > 0) {\n                      <span class=\"success\">saved {{ formatCost(cacheSavings) }} ({{ cacheSavingsPct | number:'1.0-0' }}%) via cache</span>\n                    }\n                  </div>\n                </div>\n              </div>\n              <div class=\"summary-card\">\n                <div class=\"card-icon cache\">\n                  <i class=\"fas fa-bolt\"></i>\n                </div>\n                <div class=\"card-content\">\n                  <h3>Prompt Cache</h3>\n                  <div class=\"metric-value\">{{ promptMetrics.tokenUsage.totalCacheRead | number }}</div>\n                  <div class=\"metric-detail cache-detail\">\n                    <span>tokens read from cache</span>\n                    @if (promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>{{ promptMetrics.tokenUsage.totalCacheWrite | number }} written</span>\n                    }\n                    @if (promptMetrics.tokenUsage.totalCacheRead > 0 || promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>{{ cacheHitRatePct | number:'1.0-0' }}% hit rate</span>\n                    }\n                  </div>\n                </div>\n              </div>\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        </mj-accordion-panel>\n        <!-- Prompt Analytics -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-microchip\"></i> Prompt Analytics\n            </ng-template>\n            <div class=\"analytics-panel\">\n              <!-- View Mode Toggle -->\n              @if (promptMetrics.totalCount > 0) {\n                <div class=\"view-mode-toggle\">\n                  <button mjButton\n                    variant=\"flat\"\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              @if (promptMetrics.totalCount === 0) {\n                <div class=\"no-data-message\">\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              @if (promptMetrics.totalCount > 0) {\n                <div class=\"charts-grid\">\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\" [attr.aria-label]=\"expandedCharts['modelDistribution'] ? 'Collapse Model Distribution chart' : 'Expand Model Distribution chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></i>\n                      </button>\n                    </div>\n                    <div class=\"chart-card-body\">\n                      <div class=\"chart-container\">\n                        <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n                        @if (promptMetrics.byModel.size > 0) {\n                          <div class=\"chart-legend\">\n                            @for (item of promptMetrics.byModel | keyvalue; track trackByKey($index, item)) {\n                              <div class=\"legend-item\">\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                            }\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  </div>\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\" [attr.aria-label]=\"expandedCharts['executionTime'] ? 'Collapse Average Execution Time by Vendor chart' : 'Expand Average Execution Time by Vendor chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                  <!-- 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\" [attr.aria-label]=\"expandedCharts['costByVendor'] ? 'Collapse Cost Distribution by Vendor chart' : 'Expand Cost Distribution by Vendor chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                  <!-- 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\" [attr.aria-label]=\"expandedCharts['tokenUsage'] ? 'Collapse Token Usage by Model chart' : 'Expand Token Usage by Model chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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              @if (promptMetrics.totalCount > 0) {\n                <div class=\"charts-grid\" style=\"margin-top: 20px;\">\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\" [attr.aria-label]=\"expandedCharts['promptTime'] ? 'Collapse Average Execution Time by Prompt chart' : 'Expand Average Execution Time by Prompt chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                  <!-- 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\" [attr.aria-label]=\"expandedCharts['promptToken'] ? 'Collapse Token Usage by Prompt chart' : 'Expand Token Usage by Prompt chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                  <!-- 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\" [attr.aria-label]=\"expandedCharts['promptCost'] ? 'Collapse Cost Distribution by Prompt chart' : 'Expand Cost Distribution by Prompt chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                  <!-- 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\" [attr.aria-label]=\"expandedCharts['promptCount'] ? 'Collapse Prompt Execution Count chart' : 'Expand Prompt Execution Count chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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 mjButton\n                  variant=\"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                @if (promptDetailsExpanded) {\n                  <div class=\"metrics-table\">\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                        @for (prompt of promptMetrics.byPrompt | keyvalue; track trackByKey($index, prompt)) {\n                          <tr>\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                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Action Analytics -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-cog\"></i> Action Analytics\n            </ng-template>\n            <div class=\"analytics-panel\">\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\" [attr.aria-label]=\"expandedCharts['actionSuccess'] ? 'Collapse Action Success Rate chart' : 'Expand Action Success Rate chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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                <!-- 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\" [attr.aria-label]=\"expandedCharts['stepType'] ? 'Collapse Step Type Distribution chart' : 'Expand Step Type Distribution chart'\">\n                      <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\" aria-hidden=\"true\"></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              <!-- Detailed Action Metrics -->\n              <div class=\"detailed-metrics\">\n                <button mjButton\n                  variant=\"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                @if (actionDetailsExpanded) {\n                  <div class=\"metrics-table\">\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                        @for (action of actionMetrics.byAction | keyvalue; track trackByKey($index, action)) {\n                          <tr>\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                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n              <!-- Error Analysis -->\n              <div class=\"error-analysis-section\">\n                @if (actionMetrics.errorAnalysis.size > 0) {\n                  <div class=\"error-analysis\">\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                      @for (error of getTopErrors(); track trackByErrorMessage($index, error)) {\n                        <div class=\"error-item\">\n                          <span class=\"error-count\">{{ error.count }}x</span>\n                          <span class=\"error-message\">{{ error.message }}</span>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n                @if (actionMetrics.errorAnalysis.size === 0) {\n                  <div class=\"no-errors\">\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                }\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Model Performance Comparison -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n            </ng-template>\n            <div class=\"analytics-panel\">\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                    @for (model of getModelPerformanceData(); track trackByModelName($index, model)) {\n                      <tr>\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                    }\n                  </tbody>\n                </table>\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Timeline Analysis -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n            </ng-template>\n            <div class=\"analytics-panel\">\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              <div class=\"step-breakdown\">\n                <h3>Steps by Type</h3>\n                <div class=\"step-type-list\">\n                  @for (type of timelineMetrics.stepsByType | keyvalue; track trackByKey($index, type)) {\n                    <div class=\"step-type-item\">\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                  }\n                </div>\n              </div>\n            </div>\n        </mj-accordion-panel>\n    </div>\n  }\n</div>", styles: [".analytics-container {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n}\n\n.loading-state i,\n.error-state i {\n  margin-bottom: 15px;\n}\n\n.error-state {\n  color: var(--mj-status-error);\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-text-inverse);\n}\n\n.card-icon.prompts {\n  background: var(--mj-brand-primary);\n}\n\n.card-icon.actions {\n  background: var(--mj-status-error);\n}\n\n.card-icon.cost {\n  background: var(--mj-status-success);\n}\n\n.card-icon.time {\n  background: var(--mj-status-warning);\n}\n\n.card-icon.cache {\n  background: var(--mj-status-info);\n}\n\n.card-content h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.metric-detail {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.metric-detail .success {\n  color: var(--mj-status-success);\n  margin-right: 10px;\n}\n\n.metric-detail .failed {\n  color: var(--mj-status-error);\n}\n\n/* Cache card stacks its facts (caption / written / hit rate) one per line. */\n.metric-detail.cache-detail span {\n  display: block;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n  padding: 15px;\n}\n\n/* Accordion Panel Styling */\n.analytics-content mj-accordion-panel {\n  display: block;\n  margin-bottom: 12px;\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: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.chart-card-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header h3 i {\n  font-size: 16px;\n  color: var(--mj-text-muted);\n}\n\n.expand-btn {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.expand-btn:hover {\n  color: var(--mj-text-secondary);\n}\n\n.chart-card-body {\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n  margin-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n}\n\n.metrics-table td {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.metrics-table tr:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.success-rate {\n  font-weight: 500;\n}\n\n.success-rate.high {\n  color: var(--mj-status-success);\n}\n\n.success-rate.medium {\n  color: var(--mj-status-warning);\n}\n\n.success-rate.low {\n  color: var(--mj-status-error);\n}\n\n/* Error Analysis */\n.error-analysis {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.error-analysis h3 {\n  margin: 0 0 15px 0;\n  color: var(--mj-status-error);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-radius: 8px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.no-errors i {\n  font-size: 24px;\n  color: var(--mj-status-success);\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: var(--mj-text-muted);\n}\n\n.no-data-message i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: var(--mj-border-strong);\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: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 2px solid var(--mj-border-strong);\n  white-space: nowrap;\n}\n\n.model-comparison td {\n  padding: 12px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.model-comparison tr:hover {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.stat-value {\n  font-size: 32px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.step-breakdown h3 {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.step-type-item i {\n  width: 30px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.type-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.type-percentage {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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: [{
@@ -2181,5 +2358,5 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             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: 72 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 82 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map