@memberjunction/ng-core-entity-forms 6.1.0-edge.1 → 6.1.0-edge.2

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

@@ -2,6 +2,7 @@ import { Component, Input, ViewChild, ChangeDetectionStrategy } from '@angular/c
 import { Subject } from 'rxjs';
 import { RunView } from '@memberjunction/core';
 import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
+import { WalkAgentRunTree } from '@memberjunction/ai-core-plus';
 import * as d3 from 'd3';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
@@ -56,7 +57,21 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_27_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.failed, " failed");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost), " this run");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate3("+ ", ctx_r1.formatCost(ctx_r1.DispatchedCost.Cost), " across ", ctx_r1.DispatchedCost.NodeCount, " workflow step", ctx_r1.DispatchedCost.NodeCount === 1 ? "" : "s");
+} }
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -66,7 +81,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_40_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("incl. ", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.tokenUsage.totalCacheRead + ctx_r1.promptMetrics.tokenUsage.totalCacheWrite), " cached");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -75,7 +90,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("input ", ctx_r1.formatCost(ctx_r1.inputCost), " \u00B7 output ", ctx_r1.formatCost(ctx_r1.outputCost));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -85,7 +100,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_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_55_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -95,7 +110,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.tokenUsage.totalCacheWrite), " written");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
@@ -105,14 +120,14 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(2, 1, ctx_r1.cacheHitRatePct, "1.0-0"), "% hit rate");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_69_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_70_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 21);
     i0.ɵɵtext(1, " Prompt Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_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_71_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    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.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -123,10 +138,10 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 38);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -140,9 +155,9 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_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_73_Conditional_12_Template(rf, ctx) { if (rf & 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_73_Conditional_12_For_2_Template, 4, 5, "div", 75, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(1, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_12_For_2_Template, 4, 5, "div", 75, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(3, "keyvalue");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -150,10 +165,10 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_1
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(3, 0, ctx_r1.promptMetrics.byModel));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_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_73_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("modelDistribution")); });
+    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(3, "h3");
     i0.ɵɵelement(4, "i", 67);
     i0.ɵɵtext(5, " Prompts by Model");
@@ -163,10 +178,10 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf,
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(8, "div", 50)(9, "div", 51);
     i0.ɵɵelement(10, "div", 68, 2);
-    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Conditional_12_Template, 4, 2, "div", 69);
+    i0.ɵɵconditionalCreate(12, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Conditional_12_Template, 4, 2, "div", 69);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "div", 45)(14, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("executionTime")); });
+    i0.ɵɵ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(15, "h3");
     i0.ɵɵelement(16, "i", 35);
     i0.ɵɵtext(17, " Average Execution Time by Vendor");
@@ -178,7 +193,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf,
     i0.ɵɵelement(22, "div", 70, 3);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(24, "div", 45)(25, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("costByVendor")); });
+    i0.ɵɵ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(26, "h3");
     i0.ɵɵelement(27, "i", 30);
     i0.ɵɵtext(28, " Cost Distribution by Vendor");
@@ -192,7 +207,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf,
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(37, "div", 45)(38, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("tokenUsage")); });
+    i0.ɵɵ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(39, "h3");
     i0.ɵɵelement(40, "i", 73);
     i0.ɵɵtext(41, " Token Usage by Model");
@@ -234,10 +249,10 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["tokenUsage"] ? "fa-compress" : "fa-expand");
 } }
-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 _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 40)(1, "div", 45)(2, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptTime")); });
+    i0.ɵɵ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(3, "h3");
     i0.ɵɵelement(4, "i", 78);
     i0.ɵɵtext(5, " Average Execution Time by Prompt");
@@ -249,7 +264,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf,
     i0.ɵɵelement(10, "div", 79, 6);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(12, "div", 45)(13, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptToken")); });
+    i0.ɵɵ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(14, "h3");
     i0.ɵɵelement(15, "i", 80);
     i0.ɵɵtext(16, " Token Usage by Prompt");
@@ -261,7 +276,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf,
     i0.ɵɵelement(21, "div", 81, 7);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(23, "div", 45)(24, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCost")); });
+    i0.ɵɵ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(25, "h3");
     i0.ɵɵelement(26, "i", 67);
     i0.ɵɵtext(27, " Cost Distribution by Prompt");
@@ -273,7 +288,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf,
     i0.ɵɵelement(32, "div", 82, 8);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(34, "div", 45)(35, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template_div_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCount")); });
+    i0.ɵɵ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(36, "h3");
     i0.ɵɵelement(37, "i", 83);
     i0.ɵɵtext(38, " Prompt Execution Count");
@@ -311,7 +326,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCount"] ? "fa-compress" : "fa-expand");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -341,7 +356,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_For_16_Templa
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+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");
     i0.ɵɵtext(5, "Prompt Name");
     i0.ɵɵelementEnd();
@@ -358,7 +373,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template(rf,
     i0.ɵɵtext(13, "Success Rate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_80_For_16_Template, 12, 5, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -366,11 +381,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.promptMetrics.byPrompt));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_81_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_82_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 28);
     i0.ɵɵtext(1, " Action Analytics ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_For_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -402,7 +417,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_For_16_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r9.key));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template(rf, ctx) { if (rf & 1) {
+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");
     i0.ɵɵtext(5, "Action Name");
     i0.ɵɵelementEnd();
@@ -419,7 +434,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template(rf,
     i0.ɵɵtext(13, "Type");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
+    i0.ɵɵrepeaterCreate(15, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_For_16_Template, 12, 11, "tr", null, i0.ɵɵcomponentInstance().trackByKey, true);
     i0.ɵɵpipe(17, "keyvalue");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -427,7 +442,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template(rf,
     i0.ɵɵadvance(15);
     i0.ɵɵrepeater(i0.ɵɵpipeBind1(17, 0, ctx_r1.actionMetrics.byAction));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_For_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 89)(1, "span", 90);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -441,7 +456,7 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_For_8_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(error_r10.message);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 56)(1, "h3");
     i0.ɵɵelement(2, "i", 86);
     i0.ɵɵtext(3, " Common Errors ");
@@ -450,21 +465,21 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template(rf,
     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_112_For_8_Template, 5, 2, "div", 89, i0.ɵɵcomponentInstance().trackByErrorMessage, true);
+    i0.ɵɵrepeaterCreate(7, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_For_8_Template, 5, 2, "div", 89, 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_113_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_Conditional_114_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 57);
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_115_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_116_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 92);
     i0.ɵɵtext(1, " Model Performance Comparison ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_139_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_For_140_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -511,11 +526,11 @@ function AIAgentRunAnalyticsComponent_Conditional_3_For_139_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r11.outputTokens, "1.0-0"));
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_141_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunAnalyticsComponent_Conditional_3_ng_template_142_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 93);
     i0.ɵɵtext(1, " Execution Timeline Analysis ");
 } }
-function AIAgentRunAnalyticsComponent_Conditional_3_For_169_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -580,154 +595,155 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(34, "div", 23);
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "div", 31)(37, "span");
-    i0.ɵɵtext(38);
-    i0.ɵɵpipe(39, "number");
+    i0.ɵɵconditionalCreate(36, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_36_Template, 5, 4, "div", 31);
+    i0.ɵɵelementStart(37, "div", 31)(38, "span");
+    i0.ɵɵtext(39);
+    i0.ɵɵpipe(40, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(40, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_40_Template, 3, 3, "span");
-    i0.ɵɵconditionalCreate(41, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_41_Template, 2, 2, "span");
-    i0.ɵɵconditionalCreate(42, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_42_Template, 3, 5, "span", 25);
+    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.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(43, "div", 19)(44, "div", 32);
-    i0.ɵɵelement(45, "i", 33);
+    i0.ɵɵelementStart(44, "div", 19)(45, "div", 32);
+    i0.ɵɵelement(46, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "div", 22)(47, "h3");
-    i0.ɵɵtext(48, "Prompt Cache");
+    i0.ɵɵelementStart(47, "div", 22)(48, "h3");
+    i0.ɵɵtext(49, "Prompt Cache");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "div", 23);
-    i0.ɵɵtext(50);
-    i0.ɵɵpipe(51, "number");
+    i0.ɵɵelementStart(50, "div", 23);
+    i0.ɵɵtext(51);
+    i0.ɵɵpipe(52, "number");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "div", 31)(53, "span");
-    i0.ɵɵtext(54, "tokens read from cache");
+    i0.ɵɵelementStart(53, "div", 31)(54, "span");
+    i0.ɵɵtext(55, "tokens read from cache");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(55, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_55_Template, 3, 3, "span");
-    i0.ɵɵconditionalCreate(56, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template, 3, 4, "span");
+    i0.ɵɵconditionalCreate(56, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_56_Template, 3, 3, "span");
+    i0.ɵɵconditionalCreate(57, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_57_Template, 3, 4, "span");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(57, "div", 19)(58, "div", 34);
-    i0.ɵɵelement(59, "i", 35);
+    i0.ɵɵelementStart(58, "div", 19)(59, "div", 34);
+    i0.ɵɵelement(60, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "div", 22)(61, "h3");
-    i0.ɵɵtext(62, "Execution Time");
+    i0.ɵɵelementStart(61, "div", 22)(62, "h3");
+    i0.ɵɵtext(63, "Execution Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "div", 23);
-    i0.ɵɵtext(64);
+    i0.ɵɵelementStart(64, "div", 23);
+    i0.ɵɵtext(65);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(65, "div", 24)(66, "span");
-    i0.ɵɵtext(67);
+    i0.ɵɵelementStart(66, "div", 24)(67, "span");
+    i0.ɵɵtext(68);
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(68, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(69, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_69_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(70, "div", 36);
-    i0.ɵɵconditionalCreate(71, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_71_Template, 4, 2, "div", 37);
-    i0.ɵɵconditionalCreate(72, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_72_Template, 1, 0, "mj-empty-state", 38);
-    i0.ɵɵconditionalCreate(73, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_73_Template, 48, 18, "div", 39);
-    i0.ɵɵconditionalCreate(74, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_74_Template, 45, 16, "div", 40);
-    i0.ɵɵelementStart(75, "div", 41)(76, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_76_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
-    i0.ɵɵelement(77, "i", 43);
-    i0.ɵɵtext(78, " Detailed Prompt Metrics ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(79, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_79_Template, 18, 2, "div", 44);
+    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.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(80, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(81, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_81_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(82, "div", 36)(83, "div", 39)(84, "div", 45)(85, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_85_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
-    i0.ɵɵelementStart(86, "h3");
-    i0.ɵɵelement(87, "i", 47);
-    i0.ɵɵtext(88, " Action Success Rate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(89, "button", 48);
-    i0.ɵɵelement(90, "i", 49);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(91, "div", 50)(92, "div", 51);
-    i0.ɵɵelement(93, "div", 52, 0);
+    i0.ɵɵelementStart(92, "div", 50)(93, "div", 51);
+    i0.ɵɵelement(94, "div", 52, 0);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(95, "div", 45)(96, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_div_click_96_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
-    i0.ɵɵelementStart(97, "h3");
-    i0.ɵɵelement(98, "i", 53);
-    i0.ɵɵtext(99, " Step Type Distribution");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(100, "button", 48);
-    i0.ɵɵelement(101, "i", 49);
+    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.ɵɵelementEnd()();
-    i0.ɵɵelementStart(102, "div", 50)(103, "div", 51);
-    i0.ɵɵelement(104, "div", 54, 1);
+    i0.ɵɵelementStart(103, "div", 50)(104, "div", 51);
+    i0.ɵɵelement(105, "div", 54, 1);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(106, "div", 41)(107, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_Conditional_3_Template_button_click_107_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
-    i0.ɵɵelement(108, "i", 43);
-    i0.ɵɵtext(109, " Detailed Action Metrics ");
+    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.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(110, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_110_Template, 18, 2, "div", 44);
+    i0.ɵɵconditionalCreate(111, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_111_Template, 18, 2, "div", 44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(111, "div", 55);
-    i0.ɵɵconditionalCreate(112, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_112_Template, 9, 0, "div", 56);
-    i0.ɵɵconditionalCreate(113, AIAgentRunAnalyticsComponent_Conditional_3_Conditional_113_Template, 1, 0, "mj-empty-state", 57);
+    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.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(114, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(115, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_115_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(116, "div", 36)(117, "div", 58)(118, "table")(119, "thead")(120, "tr")(121, "th");
-    i0.ɵɵtext(122, "Model");
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(123, "th");
-    i0.ɵɵtext(124, "Vendor");
+    i0.ɵɵelementStart(124, "th");
+    i0.ɵɵtext(125, "Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(125, "th");
-    i0.ɵɵtext(126, "Prompts");
+    i0.ɵɵelementStart(126, "th");
+    i0.ɵɵtext(127, "Prompts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(127, "th");
-    i0.ɵɵtext(128, "Avg Time");
+    i0.ɵɵelementStart(128, "th");
+    i0.ɵɵtext(129, "Avg Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(129, "th");
-    i0.ɵɵtext(130, "Total Cost");
+    i0.ɵɵelementStart(130, "th");
+    i0.ɵɵtext(131, "Total Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(131, "th");
-    i0.ɵɵtext(132, "Avg Cost/Prompt");
+    i0.ɵɵelementStart(132, "th");
+    i0.ɵɵtext(133, "Avg Cost/Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(133, "th");
-    i0.ɵɵtext(134, "Input Tokens");
+    i0.ɵɵelementStart(134, "th");
+    i0.ɵɵtext(135, "Input Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(135, "th");
-    i0.ɵɵtext(136, "Output Tokens");
+    i0.ɵɵelementStart(136, "th");
+    i0.ɵɵtext(137, "Output Tokens");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(137, "tbody");
-    i0.ɵɵrepeaterCreate(138, AIAgentRunAnalyticsComponent_Conditional_3_For_139_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
+    i0.ɵɵelementStart(138, "tbody");
+    i0.ɵɵrepeaterCreate(139, AIAgentRunAnalyticsComponent_Conditional_3_For_140_Template, 19, 14, "tr", null, i0.ɵɵcomponentInstance().trackByModelName, true);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(140, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(141, AIAgentRunAnalyticsComponent_Conditional_3_ng_template_141_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(142, "div", 36)(143, "div", 59)(144, "div", 60)(145, "span", 61);
-    i0.ɵɵtext(146, "Total Steps");
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(147, "span", 62);
-    i0.ɵɵtext(148);
+    i0.ɵɵelementStart(148, "span", 62);
+    i0.ɵɵtext(149);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(149, "div", 60)(150, "span", 61);
-    i0.ɵɵtext(151, "Parallel Executions");
+    i0.ɵɵelementStart(150, "div", 60)(151, "span", 61);
+    i0.ɵɵtext(152, "Parallel Executions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(152, "span", 62);
-    i0.ɵɵtext(153);
+    i0.ɵɵelementStart(153, "span", 62);
+    i0.ɵɵtext(154);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(154, "div", 60)(155, "span", 61);
-    i0.ɵɵtext(156, "Max Nesting Depth");
+    i0.ɵɵelementStart(155, "div", 60)(156, "span", 61);
+    i0.ɵɵtext(157, "Max Nesting Depth");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(157, "span", 62);
-    i0.ɵɵtext(158);
+    i0.ɵɵelementStart(158, "span", 62);
+    i0.ɵɵtext(159);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(159, "div", 60)(160, "span", 61);
-    i0.ɵɵtext(161, "Sub-Agent Runs");
+    i0.ɵɵelementStart(160, "div", 60)(161, "span", 61);
+    i0.ɵɵtext(162, "Sub-Agent Runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(162, "span", 62);
-    i0.ɵɵtext(163);
+    i0.ɵɵelementStart(163, "span", 62);
+    i0.ɵɵtext(164);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(164, "div", 63)(165, "h3");
-    i0.ɵɵtext(166, "Steps by Type");
+    i0.ɵɵelementStart(165, "div", 63)(166, "h3");
+    i0.ɵɵtext(167, "Steps by Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(167, "div", 64);
-    i0.ɵɵrepeaterCreate(168, AIAgentRunAnalyticsComponent_Conditional_3_For_169_Template, 8, 4, "div", 65, i0.ɵɵcomponentInstance().trackByKey, true);
-    i0.ɵɵpipe(170, "keyvalue");
+    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.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -746,21 +762,23 @@ function AIAgentRunAnalyticsComponent_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.actionMetrics.statusBreakdown.failed > 0 ? 27 : -1);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost));
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost + ctx_r1.DispatchedCost.Cost), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.HasDispatchedWork ? 36 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(39, 43, ctx_r1.totalTokensProcessed), " tokens");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(40, 44, ctx_r1.totalTokensProcessed), " tokens");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 40 : -1);
+    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 ? 41 : -1);
+    i0.ɵɵconditional(ctx_r1.inputCost > 0 || ctx_r1.outputCost > 0 ? 42 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.cacheSavings > 0 ? 42 : -1);
+    i0.ɵɵconditional(ctx_r1.cacheSavings > 0 ? 43 : -1);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(51, 45, ctx_r1.promptMetrics.tokenUsage.totalCacheRead));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 46, ctx_r1.promptMetrics.tokenUsage.totalCacheRead));
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 55 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 56 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 56 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.tokenUsage.totalCacheRead > 0 || ctx_r1.promptMetrics.tokenUsage.totalCacheWrite > 0 ? 57 : -1);
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.promptMetrics.totalExecutionTime + ctx_r1.actionMetrics.totalExecutionTime));
     i0.ɵɵadvance(3);
@@ -768,17 +786,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 ? 71 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 72 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 72 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 73 : -1);
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount === 0 ? 73 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 74 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.promptMetrics.totalCount > 0 ? 75 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.promptDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 79 : -1);
+    i0.ɵɵconditional(ctx_r1.promptDetailsExpanded ? 80 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(4);
@@ -796,11 +814,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 ? 110 : -1);
+    i0.ɵɵconditional(ctx_r1.actionDetailsExpanded ? 111 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 112 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size > 0 ? 113 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 113 : -1);
+    i0.ɵɵconditional(ctx_r1.actionMetrics.errorAnalysis.size === 0 ? 114 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", true);
     i0.ɵɵadvance(24);
@@ -816,9 +834,46 @@ 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(170, 47, ctx_r1.timelineMetrics.stepsByType));
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(171, 48, ctx_r1.timelineMetrics.stepsByType));
 } }
 export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
+    /**
+     * The run's execution tree, loaded once by the form and shared with every tab.
+     *
+     * **This is what makes the totals honest.** Analytics derives cost from prompt runs reached
+     * through the run's own STEPS, which cannot see work the run dispatched: a task-graph's spend
+     * lives on Task rows and on prompt runs those tasks produced, so a workflow's cost was simply
+     * missing from every figure on this tab. Each tree node reports its OWN cost — never a rollup —
+     * so a total is an honest sum rather than a double-count.
+     */
+    set RunTree(value) {
+        this.runTree = value;
+        this.cdr.markForCheck();
+    }
+    /**
+     * What the dispatched work cost, from the tree — the part the step-based figures cannot see.
+     *
+     * Zero when there is no graph, so a run that dispatched nothing reads exactly as it did before.
+     */
+    get DispatchedCost() {
+        if (!this.runTree)
+            return { Cost: 0, Tokens: 0, NodeCount: 0 };
+        let cost = 0, tokens = 0, nodeCount = 0;
+        for (const node of WalkAgentRunTree(this.runTree)) {
+            // Only nodes the RUN's own step list cannot reach. Counting the run's steps here as well
+            // would double every figure this tab already shows correctly.
+            if (node.NodeType !== 'Task' && node.NodeType !== 'TaskGraph')
+                continue;
+            nodeCount++;
+            cost += node.Cost ?? 0;
+            tokens += node.Tokens ?? 0;
+        }
+        return { Cost: cost, Tokens: tokens, NodeCount: nodeCount };
+    }
+    /** True when this run dispatched a workflow, so the tab can show the extra figures at all. */
+    get HasDispatchedWork() {
+        return this.DispatchedCost.NodeCount > 0;
+    }
     /** Helper method to create tracked setTimeout calls */
     setTrackedTimeout(callback, delay = 0) {
         const timeoutId = setTimeout(() => {
@@ -843,6 +898,7 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
         super();
         this.cdr = cdr;
         this.costService = costService;
+        this.runTree = null;
         this.destroy$ = new Subject();
         /** Track active timeouts for cleanup */
         this.activeTimeouts = [];
@@ -2289,11 +2345,11 @@ export class AIAgentRunAnalyticsComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptTokenDistributionChart = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCostDistributionChart = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCountByNameChart = _t.first);
-        } }, inputs: { agentRunId: "agentRunId" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [["actionSuccessRateChart", ""], ["stepTypeChart", ""], ["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], [1, "analytics-container"], [1, "loading-state"], ["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, "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, 171, 49, "div", 13);
+            i0.ɵɵconditionalCreate(3, AIAgentRunAnalyticsComponent_Conditional_3_Template, 172, 50, "div", 13);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -2306,9 +2362,11 @@ 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                  <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n                  <div class=\"metric-detail cache-detail\">\n                    <span>{{ totalTokensProcessed | number }} tokens</span>\n                    @if (promptMetrics.tokenUsage.totalCacheRead > 0 || promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>incl. {{ (promptMetrics.tokenUsage.totalCacheRead + promptMetrics.tokenUsage.totalCacheWrite) | number }} cached</span>\n                    }\n                    @if (inputCost > 0 || outputCost > 0) {\n                      <span>input {{ formatCost(inputCost) }} &middot; output {{ formatCost(outputCost) }}</span>\n                    }\n                    @if (cacheSavings > 0) {\n                      <span class=\"success\">saved {{ formatCost(cacheSavings) }} ({{ cacheSavingsPct | number:'1.0-0' }}%) via cache</span>\n                    }\n                  </div>\n                </div>\n              </div>\n              <div class=\"summary-card\">\n                <div class=\"card-icon cache\">\n                  <i class=\"fas fa-bolt\"></i>\n                </div>\n                <div class=\"card-content\">\n                  <h3>Prompt Cache</h3>\n                  <div class=\"metric-value\">{{ promptMetrics.tokenUsage.totalCacheRead | number }}</div>\n                  <div class=\"metric-detail cache-detail\">\n                    <span>tokens read from cache</span>\n                    @if (promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>{{ promptMetrics.tokenUsage.totalCacheWrite | number }} written</span>\n                    }\n                    @if (promptMetrics.tokenUsage.totalCacheRead > 0 || promptMetrics.tokenUsage.totalCacheWrite > 0) {\n                      <span>{{ cacheHitRatePct | number:'1.0-0' }}% hit rate</span>\n                    }\n                  </div>\n                </div>\n              </div>\n              <div class=\"summary-card\">\n                <div class=\"card-icon time\">\n                  <i class=\"fas fa-clock\"></i>\n                </div>\n                <div class=\"card-content\">\n                  <h3>Execution Time</h3>\n                  <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n                  <div class=\"metric-detail\">\n                    <span>{{ timelineMetrics.totalSteps }} total steps</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n        </mj-accordion-panel>\n        <!-- Prompt Analytics -->\n        <mj-accordion-panel [Expanded]=\"true\">\n            <ng-template mjAccordionTitle>\n              <i class=\"fas fa-microchip\"></i> Prompt Analytics\n            </ng-template>\n            <div class=\"analytics-panel\">\n              <!-- View Mode Toggle -->\n              @if (promptMetrics.totalCount > 0) {\n                <div class=\"view-mode-toggle\">\n                  <button mjButton\n                    variant=\"flat\"\n                    (click)=\"toggleViewMode()\">\n                    <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n                    {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n                  </button>\n                </div>\n              }\n              <!-- No prompts message -->\n              @if (promptMetrics.totalCount === 0) {\n                <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                    @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: [{
+            type: Input
         }], modelDistributionChart: [{
             type: ViewChild,
             args: ['modelDistributionChart', { static: false }]
@@ -2340,5 +2398,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: 82 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 83 }); })();
 //# sourceMappingURL=ai-agent-run-analytics.component.js.map