@memberjunction/ng-core-entity-forms 6.2.0-edge.3 → 6.2.0-edge.5

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

@@ -5,6 +5,7 @@ import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import { WalkAgentRunTree } from '@memberjunction/ai-core-plus';
 import { TOKEN_PRICE_UNIT_TYPE_DIVISORS } from '@memberjunction/ai-engine-base';
 import * as d3 from 'd3';
+import { SplitPromptRunCost } from './agent-run-cost-split';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "./ai-agent-run-cost.service";
@@ -37,7 +38,7 @@ function AIAgentRunAnalyticsComponent_Conditional_2_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("Message", ctx_r1.error);
 } }
 function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 66);
+    i0.ɵɵelement(0, "i", 67);
     i0.ɵɵtext(1, " Overview ");
 } }
 function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
@@ -92,6 +93,15 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template(rf,
     i0.ɵɵtextInterpolate2("input ", ctx_r1.formatCost(ctx_r1.inputCost), " \u00B7 output ", ctx_r1.formatCost(ctx_r1.outputCost));
 } }
 function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("avatar video ", ctx_r1.FormatCost(ctx_r1.AvatarVideoCost));
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -101,7 +111,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_43_Template(rf,
     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_56_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -111,7 +121,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.tokenUsage.totalCacheWrite), " written");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_58_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -121,15 +131,15 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(2, 1, ctx_r1.cacheHitRatePct, "1.0-0"), "% hit rate");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_70_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_71_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 21);
     i0.ɵɵtext(1, " Prompt Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
-    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵelementStart(0, "div", 38)(1, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_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) {
@@ -139,13 +149,13 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 38);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 39);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "span", 76);
-    i0.ɵɵelementStart(2, "span", 77);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "span", 77);
+    i0.ɵɵelementStart(2, "span", 78);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -156,9 +166,9 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_74_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵrepeaterCreate(1, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_12_For_2_Template, 4, 5, "div", 75, i0.ɵɵcomponentInstance().trackByKey, true);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵrepeaterCreate(1, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Conditional_12_For_2_Template, 4, 5, "div", 76, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(3, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -166,58 +176,58 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_1
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(3, 0, ctx_r1.promptMetrics.byModel));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39)(1, "div", 45)(2, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_75_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", 67);
+    i0.ɵɵelement(4, "i", 68);
     i0.ɵɵtext(5, " Prompts by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 48);
-    i0.ɵɵelement(7, "i", 49);
+    i0.ɵɵelementStart(6, "button", 49);
+    i0.ɵɵelement(7, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 50)(9, "div", 51);
-    i0.ɵɵelement(10, "div", 68, 2);
-    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_12_Template, 4, 2, "div", 69);
+    i0.ɵɵelementStart(8, "div", 51)(9, "div", 52);
+    i0.ɵɵelement(10, "div", 69, 2);
+    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Conditional_12_Template, 4, 2, "div", 70);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 45)(14, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_75_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", 35);
+    i0.ɵɵelement(16, "i", 36);
     i0.ɵɵtext(17, " Average Execution Time by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 48);
-    i0.ɵɵelement(19, "i", 49);
+    i0.ɵɵelementStart(18, "button", 49);
+    i0.ɵɵelement(19, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 50)(21, "div", 51);
-    i0.ɵɵelement(22, "div", 70, 3);
+    i0.ɵɵelementStart(20, "div", 51)(21, "div", 52);
+    i0.ɵɵelement(22, "div", 71, 3);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 45)(25, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_75_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", 30);
     i0.ɵɵtext(28, " Cost Distribution by Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "button", 48);
-    i0.ɵɵelement(30, "i", 49);
+    i0.ɵɵelementStart(29, "button", 49);
+    i0.ɵɵelement(30, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 50)(32, "div", 51);
-    i0.ɵɵelement(33, "div", 71, 4);
-    i0.ɵɵelementStart(35, "div", 72);
+    i0.ɵɵelementStart(31, "div", 51)(32, "div", 52);
+    i0.ɵɵelement(33, "div", 72, 4);
+    i0.ɵɵelementStart(35, "div", 73);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(37, "div", 45)(38, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_75_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", 73);
+    i0.ɵɵelement(40, "i", 74);
     i0.ɵɵtext(41, " Token Usage by Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "button", 48);
-    i0.ɵɵelement(43, "i", 49);
+    i0.ɵɵelementStart(42, "button", 49);
+    i0.ɵɵelement(43, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 50)(45, "div", 51);
-    i0.ɵɵelement(46, "div", 74, 5);
+    i0.ɵɵelementStart(44, "div", 51)(45, "div", 52);
+    i0.ɵɵelement(46, "div", 75, 5);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -250,55 +260,55 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["tokenUsage"] ? "fa-compress" : "fa-expand");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_76_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 45)(2, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_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_76_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", 78);
+    i0.ɵɵelement(4, "i", 79);
     i0.ɵɵtext(5, " Average Execution Time by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 48);
-    i0.ɵɵelement(7, "i", 49);
+    i0.ɵɵelementStart(6, "button", 49);
+    i0.ɵɵelement(7, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 50)(9, "div", 51);
-    i0.ɵɵelement(10, "div", 79, 6);
+    i0.ɵɵelementStart(8, "div", 51)(9, "div", 52);
+    i0.ɵɵelement(10, "div", 80, 6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 45)(13, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_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_76_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", 80);
+    i0.ɵɵelement(15, "i", 81);
     i0.ɵɵtext(16, " Token Usage by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 48);
-    i0.ɵɵelement(18, "i", 49);
+    i0.ɵɵelementStart(17, "button", 49);
+    i0.ɵɵelement(18, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 50)(20, "div", 51);
-    i0.ɵɵelement(21, "div", 81, 7);
+    i0.ɵɵelementStart(19, "div", 51)(20, "div", 52);
+    i0.ɵɵelement(21, "div", 82, 7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 45)(24, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_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_76_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", 67);
+    i0.ɵɵelement(26, "i", 68);
     i0.ɵɵtext(27, " Cost Distribution by Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "button", 48);
-    i0.ɵɵelement(29, "i", 49);
+    i0.ɵɵelementStart(28, "button", 49);
+    i0.ɵɵelement(29, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 50)(31, "div", 51);
-    i0.ɵɵelement(32, "div", 82, 8);
+    i0.ɵɵelementStart(30, "div", 51)(31, "div", 52);
+    i0.ɵɵelement(32, "div", 83, 8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(34, "div", 45)(35, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_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_76_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", 83);
+    i0.ɵɵelement(37, "i", 84);
     i0.ɵɵtext(38, " Prompt Execution Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "button", 48);
-    i0.ɵɵelement(40, "i", 49);
+    i0.ɵɵelementStart(39, "button", 49);
+    i0.ɵɵelement(40, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(41, "div", 50)(42, "div", 51);
-    i0.ɵɵelement(43, "div", 84, 9);
+    i0.ɵɵelementStart(41, "div", 51)(42, "div", 52);
+    i0.ɵɵelement(43, "div", 85, 9);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -327,7 +337,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCount"] ? "fa-compress" : "fa-expand");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_81_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -340,7 +350,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Templa
     i0.ɵɵelementStart(7, "td");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td")(10, "span", 85);
+    i0.ɵɵelementStart(9, "td")(10, "span", 86);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -357,8 +367,8 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44)(1, "table")(2, "thead")(3, "tr")(4, "th");
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_81_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");
@@ -374,7 +384,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_Template(rf,
     i0.ɵɵtext(13, "Success Rate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_81_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -382,11 +392,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.promptMetrics.byPrompt));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_82_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_83_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 28);
     i0.ɵɵtext(1, " Action Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -396,7 +406,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Templ
     i0.ɵɵelementStart(5, "td");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td")(8, "span", 85);
+    i0.ɵɵelementStart(7, "td")(8, "span", 86);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "td");
@@ -418,8 +428,8 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r9.key));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44)(1, "table")(2, "thead")(3, "tr")(4, "th");
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_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");
@@ -435,7 +445,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_Template(rf,
     i0.ɵɵtext(13, "Type");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -443,11 +453,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.actionMetrics.byAction));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90)(1, "span", 91);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 91);
+    i0.ɵɵelementStart(3, "span", 92);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -457,30 +467,30 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_For_8_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(error_r10.message);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56)(1, "h3");
-    i0.ɵɵelement(2, "i", 86);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "h3");
+    i0.ɵɵelement(2, "i", 87);
     i0.ɵɵtext(3, " Common Errors ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 87);
+    i0.ɵɵelementStart(4, "p", 88);
     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", 88);
-    i0.ɵɵrepeaterCreate(7, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_For_8_Template, 5, 2, "div", 89, i0.ɵɵcomponentInstance().trackByErrorMessage, true);
+    i0.ɵɵelementStart(6, "div", 89);
+    i0.ɵɵrepeaterCreate(7, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_For_8_Template, 5, 2, "div", 90, 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_114_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 57);
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_115_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 58);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_116_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 92);
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_117_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
     i0.ɵɵtext(1, " Model Performance Comparison ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_140_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_For_141_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -527,20 +537,20 @@ function AIAgentRunAnalyticsComponent_Conditional_3_For_140_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r11.outputTokens, "1.0-0"));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_142_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 93);
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_143_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 94);
     i0.ɵɵtext(1, " Execution Timeline Analysis ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_170_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "i", 43);
-    i0.ɵɵelementStart(2, "span", 94);
+function AIAgentRunAnalyticsComponent_Conditional_3_For_171_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "span", 95);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 95);
+    i0.ɵɵelementStart(4, "span", 96);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 96);
+    i0.ɵɵelementStart(6, "span", 97);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -603,148 +613,149 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(41, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template, 3, 3, "span");
     i0.ɵɵconditionalCreate(42, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template, 2, 2, "span");
-    i0.ɵɵconditionalCreate(43, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_43_Template, 3, 5, "span", 25);
+    i0.ɵɵconditionalCreate(43, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_43_Template, 2, 1, "span", 32);
+    i0.ɵɵconditionalCreate(44, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_44_Template, 3, 5, "span", 25);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(44, "div", 19)(45, "div", 32);
-    i0.ɵɵelement(46, "i", 33);
+    i0.ɵɵelementStart(45, "div", 19)(46, "div", 33);
+    i0.ɵɵelement(47, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "div", 22)(48, "h3");
-    i0.ɵɵtext(49, "Prompt Cache");
+    i0.ɵɵelementStart(48, "div", 22)(49, "h3");
+    i0.ɵɵtext(50, "Prompt Cache");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "div", 23);
-    i0.ɵɵtext(51);
-    i0.ɵɵpipe(52, "number");
+    i0.ɵɵelementStart(51, "div", 23);
+    i0.ɵɵtext(52);
+    i0.ɵɵpipe(53, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "div", 31)(54, "span");
-    i0.ɵɵtext(55, "tokens read from cache");
+    i0.ɵɵelementStart(54, "div", 31)(55, "span");
+    i0.ɵɵtext(56, "tokens read from cache");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(56, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template, 3, 3, "span");
-    i0.ɵɵconditionalCreate(57, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template, 3, 4, "span");
+    i0.ɵɵconditionalCreate(57, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template, 3, 3, "span");
+    i0.ɵɵconditionalCreate(58, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_58_Template, 3, 4, "span");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(58, "div", 19)(59, "div", 34);
-    i0.ɵɵelement(60, "i", 35);
+    i0.ɵɵelementStart(59, "div", 19)(60, "div", 35);
+    i0.ɵɵelement(61, "i", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "div", 22)(62, "h3");
-    i0.ɵɵtext(63, "Execution Time");
+    i0.ɵɵelementStart(62, "div", 22)(63, "h3");
+    i0.ɵɵtext(64, "Execution Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "div", 23);
-    i0.ɵɵtext(65);
+    i0.ɵɵelementStart(65, "div", 23);
+    i0.ɵɵtext(66);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(66, "div", 24)(67, "span");
-    i0.ɵɵtext(68);
+    i0.ɵɵelementStart(67, "div", 24)(68, "span");
+    i0.ɵɵtext(69);
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(69, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(70, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_70_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(71, "div", 36);
-    i0.ɵɵconditionalCreate(72, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template, 4, 2, "div", 37);
-    i0.ɵɵconditionalCreate(73, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template, 1, 0, "mj-empty-state", 38);
-    i0.ɵɵconditionalCreate(74, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template, 48, 18, "div", 39);
-    i0.ɵɵconditionalCreate(75, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Template, 45, 16, "div", 40);
-    i0.ɵɵelementStart(76, "div", 41)(77, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_77_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
-    i0.ɵɵelement(78, "i", 43);
-    i0.ɵɵtext(79, " Detailed Prompt Metrics ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(80, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_Template, 18, 2, "div", 44);
+    i0.ɵɵelementStart(70, "mj-accordion-panel", 16);
+    i0.ɵɵtemplate(71, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_71_Template, 2, 0, "ng-template", 17);
+    i0.ɵɵelementStart(72, "div", 37);
+    i0.ɵɵconditionalCreate(73, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template, 4, 2, "div", 38);
+    i0.ɵɵconditionalCreate(74, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template, 1, 0, "mj-empty-state", 39);
+    i0.ɵɵconditionalCreate(75, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_75_Template, 48, 18, "div", 40);
+    i0.ɵɵconditionalCreate(76, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_76_Template, 45, 16, "div", 41);
+    i0.ɵɵelementStart(77, "div", 42)(78, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_78_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
+    i0.ɵɵelement(79, "i", 44);
+    i0.ɵɵtext(80, " Detailed Prompt Metrics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(81, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_81_Template, 18, 2, "div", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(81, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(82, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_82_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(83, "div", 36)(84, "div", 39)(85, "div", 45)(86, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_86_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
-    i0.ɵɵelementStart(87, "h3");
-    i0.ɵɵelement(88, "i", 47);
-    i0.ɵɵtext(89, " Action Success Rate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(90, "button", 48);
-    i0.ɵɵelement(91, "i", 49);
+    i0.ɵɵelementStart(82, "mj-accordion-panel", 16);
+    i0.ɵɵtemplate(83, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_83_Template, 2, 0, "ng-template", 17);
+    i0.ɵɵelementStart(84, "div", 37)(85, "div", 40)(86, "div", 46)(87, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_87_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
+    i0.ɵɵelementStart(88, "h3");
+    i0.ɵɵelement(89, "i", 48);
+    i0.ɵɵtext(90, " Action Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(91, "button", 49);
+    i0.ɵɵelement(92, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(92, "div", 50)(93, "div", 51);
-    i0.ɵɵelement(94, "div", 52, 0);
+    i0.ɵɵelementStart(93, "div", 51)(94, "div", 52);
+    i0.ɵɵelement(95, "div", 53, 0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(96, "div", 45)(97, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_97_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
-    i0.ɵɵelementStart(98, "h3");
-    i0.ɵɵelement(99, "i", 53);
-    i0.ɵɵtext(100, " Step Type Distribution");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(101, "button", 48);
-    i0.ɵɵelement(102, "i", 49);
+    i0.ɵɵelementStart(97, "div", 46)(98, "div", 47);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_98_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
+    i0.ɵɵelementStart(99, "h3");
+    i0.ɵɵelement(100, "i", 54);
+    i0.ɵɵtext(101, " Step Type Distribution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(102, "button", 49);
+    i0.ɵɵelement(103, "i", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(103, "div", 50)(104, "div", 51);
-    i0.ɵɵelement(105, "div", 54, 1);
+    i0.ɵɵelementStart(104, "div", 51)(105, "div", 52);
+    i0.ɵɵelement(106, "div", 55, 1);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(107, "div", 41)(108, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_108_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
-    i0.ɵɵelement(109, "i", 43);
-    i0.ɵɵtext(110, " Detailed Action Metrics ");
+    i0.ɵɵelementStart(108, "div", 42)(109, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_109_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
+    i0.ɵɵelement(110, "i", 44);
+    i0.ɵɵtext(111, " Detailed Action Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(111, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_Template, 18, 2, "div", 44);
+    i0.ɵɵconditionalCreate(112, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template, 18, 2, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(112, "div", 55);
-    i0.ɵɵconditionalCreate(113, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template, 9, 0, "div", 56);
-    i0.ɵɵconditionalCreate(114, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_Template, 1, 0, "mj-empty-state", 57);
+    i0.ɵɵelementStart(113, "div", 56);
+    i0.ɵɵconditionalCreate(114, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_Template, 9, 0, "div", 57);
+    i0.ɵɵconditionalCreate(115, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_115_Template, 1, 0, "mj-empty-state", 58);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(115, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(116, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_116_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(117, "div", 36)(118, "div", 58)(119, "table")(120, "thead")(121, "tr")(122, "th");
-    i0.ɵɵtext(123, "Model");
+    i0.ɵɵelementStart(116, "mj-accordion-panel", 16);
+    i0.ɵɵtemplate(117, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_117_Template, 2, 0, "ng-template", 17);
+    i0.ɵɵelementStart(118, "div", 37)(119, "div", 59)(120, "table")(121, "thead")(122, "tr")(123, "th");
+    i0.ɵɵtext(124, "Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(124, "th");
-    i0.ɵɵtext(125, "Vendor");
+    i0.ɵɵelementStart(125, "th");
+    i0.ɵɵtext(126, "Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(126, "th");
-    i0.ɵɵtext(127, "Prompts");
+    i0.ɵɵelementStart(127, "th");
+    i0.ɵɵtext(128, "Prompts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(128, "th");
-    i0.ɵɵtext(129, "Avg Time");
+    i0.ɵɵelementStart(129, "th");
+    i0.ɵɵtext(130, "Avg Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(130, "th");
-    i0.ɵɵtext(131, "Total Cost");
+    i0.ɵɵelementStart(131, "th");
+    i0.ɵɵtext(132, "Total Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(132, "th");
-    i0.ɵɵtext(133, "Avg Cost/Prompt");
+    i0.ɵɵelementStart(133, "th");
+    i0.ɵɵtext(134, "Avg Cost/Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(134, "th");
-    i0.ɵɵtext(135, "Input Tokens");
+    i0.ɵɵelementStart(135, "th");
+    i0.ɵɵtext(136, "Input Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(136, "th");
-    i0.ɵɵtext(137, "Output Tokens");
+    i0.ɵɵelementStart(137, "th");
+    i0.ɵɵtext(138, "Output Tokens");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(138, "tbody");
-    i0.ɵɵrepeaterCreate(139, AIAgentRunAnalyticsComponent_Conditional_3_For_140_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
+    i0.ɵɵelementStart(139, "tbody");
+    i0.ɵɵrepeaterCreate(140, AIAgentRunAnalyticsComponent_Conditional_3_For_141_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(141, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(142, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_142_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(143, "div", 36)(144, "div", 59)(145, "div", 60)(146, "span", 61);
-    i0.ɵɵtext(147, "Total Steps");
+    i0.ɵɵelementStart(142, "mj-accordion-panel", 16);
+    i0.ɵɵtemplate(143, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_143_Template, 2, 0, "ng-template", 17);
+    i0.ɵɵelementStart(144, "div", 37)(145, "div", 60)(146, "div", 61)(147, "span", 62);
+    i0.ɵɵtext(148, "Total Steps");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(148, "span", 62);
-    i0.ɵɵtext(149);
+    i0.ɵɵelementStart(149, "span", 63);
+    i0.ɵɵtext(150);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(150, "div", 60)(151, "span", 61);
-    i0.ɵɵtext(152, "Parallel Executions");
+    i0.ɵɵelementStart(151, "div", 61)(152, "span", 62);
+    i0.ɵɵtext(153, "Parallel Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(153, "span", 62);
-    i0.ɵɵtext(154);
+    i0.ɵɵelementStart(154, "span", 63);
+    i0.ɵɵtext(155);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(155, "div", 60)(156, "span", 61);
-    i0.ɵɵtext(157, "Max Nesting Depth");
+    i0.ɵɵelementStart(156, "div", 61)(157, "span", 62);
+    i0.ɵɵtext(158, "Max Nesting Depth");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(158, "span", 62);
-    i0.ɵɵtext(159);
+    i0.ɵɵelementStart(159, "span", 63);
+    i0.ɵɵtext(160);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(160, "div", 60)(161, "span", 61);
-    i0.ɵɵtext(162, "Sub-Agent Runs");
+    i0.ɵɵelementStart(161, "div", 61)(162, "span", 62);
+    i0.ɵɵtext(163, "Sub-Agent Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(163, "span", 62);
-    i0.ɵɵtext(164);
+    i0.ɵɵelementStart(164, "span", 63);
+    i0.ɵɵtext(165);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(165, "div", 63)(166, "h3");
-    i0.ɵɵtext(167, "Steps by Type");
+    i0.ɵɵelementStart(166, "div", 64)(167, "h3");
+    i0.ɵɵtext(168, "Steps by Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(168, "div", 64);
-    i0.ɵɵrepeaterCreate(169, AIAgentRunAnalyticsComponent_Conditional_3_For_170_Template, 8, 4, "div", 65, i0.ɵɵcomponentInstance().trackByKey, true);
-    i0.ɵɵpipe(171, "keyvalue");
+    i0.ɵɵelementStart(169, "div", 65);
+    i0.ɵɵrepeaterCreate(170, AIAgentRunAnalyticsComponent_Conditional_3_For_171_Template, 8, 4, "div", 66, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵpipe(172, "keyvalue");
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -767,19 +778,21 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.HasDispatchedWork ? 36 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(40, 44, ctx_r1.totalTokensProcessed), " tokens");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(40, 45, ctx_r1.totalTokensProcessed), " tokens");
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 41 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.inputCost > 0 || ctx_r1.outputCost > 0 ? 42 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.cacheSavings > 0 ? 43 : -1);
+    i0.ɵɵconditional(ctx_r1.AvatarVideoCost > 0 ? 43 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.cacheSavings > 0 ? 44 : -1);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 46, ctx_r1.promptMetrics.tokenUsage.totalCacheRead));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(53, 47, ctx_r1.promptMetrics.tokenUsage.totalCacheRead));
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 56 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 57 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 57 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 58 : -1);
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.promptMetrics.totalExecutionTime + ctx_r1.actionMetrics.totalExecutionTime));
     i0.ɵɵadvance(3);
@@ -787,17 +800,17 @@ 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 ? 72 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 73 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 73 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 74 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 74 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 75 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 76 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.promptDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 80 : -1);
+    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 81 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(4);
@@ -815,11 +828,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(7);
     i0.ɵɵproperty("ngClass", ctx_r1.actionDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionDetailsExpanded ? 111 : -1);
+    i0.ɵɵconditional(ctx_r1.actionDetailsExpanded ? 112 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 113 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 114 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 114 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 115 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(24);
@@ -835,7 +848,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(171, 48, ctx_r1.timelineMetrics.stepsByType));
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(172, 49, ctx_r1.timelineMetrics.stepsByType));
 } }
 export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
     /**
@@ -1350,7 +1363,7 @@ 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(), inputCost: 0, outputCost: 0, savings: 0, unratedCost: 0 },
+            costBreakdown: { totalCost: 0, byModel: new Map(), byVendor: new Map(), inputCost: 0, outputCost: 0, savings: 0, avatarVideoCost: 0, unratedCost: 0 },
             tokenUsage: { totalInput: 0, totalOutput: 0, totalCacheRead: 0, totalCacheWrite: 0, byModel: new Map() }
         };
     }
@@ -1423,10 +1436,10 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             }
             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
+                InputRate: input,
+                OutputRate: (row.OutputPricePerUnit ?? 0) / divisor,
+                CacheReadRate: (row.CacheReadPricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor,
+                CacheWriteRate: (row.CacheWritePricePerUnit ?? row.InputPricePerUnit ?? 0) / divisor
             });
         }
     }
@@ -1488,12 +1501,16 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             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.
+            // An avatar call's video is priced on its own line: its cost comes from the run's cost lines,
+            // and its tokens are not output at the text 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);
+                const split = SplitPromptRunCost(promptRun, rate);
+                metrics.costBreakdown.inputCost += split.InputCost;
+                metrics.costBreakdown.outputCost += split.OutputCost;
+                metrics.costBreakdown.savings += split.Savings;
+                metrics.costBreakdown.avatarVideoCost += split.AvatarVideoCost;
             }
             else {
                 metrics.costBreakdown.unratedCost += cost;
@@ -1701,6 +1718,8 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
     }
     /** Rate-derived output dollars. */
     get OutputCost() { return this.PromptMetrics.costBreakdown.outputCost; }
+    /** Avatar video dollars, from the runs' cost lines (priced per minute, apart from the output tokens). */
+    get AvatarVideoCost() { return this.PromptMetrics.costBreakdown.avatarVideoCost; }
     /** @deprecated Use {@link OutputCost}. */
     get outputCost() {
         return this.OutputCost;
@@ -2680,11 +2699,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", RunTree: "RunTree" }, 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"], ["Variant", "error", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 3, "Message"], [1, "analytics-content"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], ["Variant", "error", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 3, "Action", "Message"], [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"], ["Icon", "fa-solid fa-circle-info", "Title", "No prompt executions found in this agent run.", "Message", "This agent run may have only executed actions without any AI prompts."], [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"], ["Variant", "success", "Message", "No action errors detected in this run. All actions completed successfully!"], [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-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-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", RunTree: "RunTree" }, 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"], ["Variant", "error", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 3, "Message"], [1, "analytics-content"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], ["Variant", "error", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 3, "Action", "Message"], [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, "avatar-video-cost"], [1, "card-icon", "cache"], [1, "fas", "fa-bolt"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "analytics-panel"], [1, "view-mode-toggle"], ["Icon", "fa-solid fa-circle-info", "Title", "No prompt executions found in this agent run.", "Message", "This agent run may have only executed actions without any AI prompts."], [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"], ["Variant", "success", "Message", "No action errors detected in this run. All actions completed successfully!"], [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-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-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, 1, 1, "mj-empty-state", 12);
-            i0.ɵɵconditionalCreate(3, AIAgentRunAnalyticsComponent_Conditional_3_Template, 172, 50, "div", 13);
+            i0.ɵɵconditionalCreate(3, AIAgentRunAnalyticsComponent_Conditional_3_Template, 173, 51, "div", 13);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -2697,7 +2716,7 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
 }
 (() => { (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    <mj-empty-state\n      Variant=\"error\"\n      [Message]=\"error\"\n      ActionText=\"Retry\"\n      ActionIcon=\"fa-solid fa-arrows-rotate\"\n      (Action)=\"loadData()\" />\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                  <!-- The run's OWN spend plus anything it dispatched. A workflow's cost lives on\n                       Task rows and the prompt runs those tasks produced, which the run's step list\n                       cannot reach \u2014 so before this the headline figure silently omitted the most\n                       expensive thing many runs do. -->\n                  <div class=\"metric-value\">\n                    {{ formatCost(promptMetrics.costBreakdown.totalCost + DispatchedCost.Cost) }}\n                  </div>\n                  @if (HasDispatchedWork) {\n                    <div class=\"metric-detail cache-detail\">\n                      <span>{{ formatCost(promptMetrics.costBreakdown.totalCost) }} this run</span>\n                      <span>+ {{ formatCost(DispatchedCost.Cost) }} across\n                        {{ DispatchedCost.NodeCount }} workflow step{{ DispatchedCost.NodeCount === 1 ? '' : 's' }}</span>\n                    </div>\n                  }\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                <mj-empty-state\n                  Icon=\"fa-solid fa-circle-info\"\n                  Title=\"No prompt executions found in this agent run.\"\n                  Message=\"This agent run may have only executed actions without any AI prompts.\" />\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                  <mj-empty-state\n                    Variant=\"success\"\n                    Message=\"No action errors detected in this run. All actions completed successfully!\" />\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 State */\n.loading-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  margin-bottom: 15px;\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/* 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    <mj-empty-state\n      Variant=\"error\"\n      [Message]=\"error\"\n      ActionText=\"Retry\"\n      ActionIcon=\"fa-solid fa-arrows-rotate\"\n      (Action)=\"loadData()\" />\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                  <!-- The run's OWN spend plus anything it dispatched. A workflow's cost lives on\n                       Task rows and the prompt runs those tasks produced, which the run's step list\n                       cannot reach \u2014 so before this the headline figure silently omitted the most\n                       expensive thing many runs do. -->\n                  <div class=\"metric-value\">\n                    {{ formatCost(promptMetrics.costBreakdown.totalCost + DispatchedCost.Cost) }}\n                  </div>\n                  @if (HasDispatchedWork) {\n                    <div class=\"metric-detail cache-detail\">\n                      <span>{{ formatCost(promptMetrics.costBreakdown.totalCost) }} this run</span>\n                      <span>+ {{ formatCost(DispatchedCost.Cost) }} across\n                        {{ DispatchedCost.NodeCount }} workflow step{{ DispatchedCost.NodeCount === 1 ? '' : 's' }}</span>\n                    </div>\n                  }\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                    <!-- Priced per minute on its own line, so it is not part of the output figure above. -->\n                    @if (AvatarVideoCost > 0) {\n                      <span class=\"avatar-video-cost\">avatar video {{ FormatCost(AvatarVideoCost) }}</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                <mj-empty-state\n                  Icon=\"fa-solid fa-circle-info\"\n                  Title=\"No prompt executions found in this agent run.\"\n                  Message=\"This agent run may have only executed actions without any AI prompts.\" />\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                  <mj-empty-state\n                    Variant=\"success\"\n                    Message=\"No action errors detected in this run. All actions completed successfully!\" />\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 State */\n.loading-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  margin-bottom: 15px;\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/* 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
         }], RunTree: [{
@@ -2733,5 +2752,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: 84 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 87 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map