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

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

@@ -0,0 +1,2091 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RunView } from '@memberjunction/core';
+import * as d3 from 'd3';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-layout";
+import * as i3 from "@progress/kendo-angular-buttons";
+const _c0 = ["modelDistributionChart"];
+const _c1 = ["executionTimeChart"];
+const _c2 = ["costByVendorChart"];
+const _c3 = ["tokenUsageChart"];
+const _c4 = ["actionSuccessRateChart"];
+const _c5 = ["stepTypeChart"];
+const _c6 = ["promptTimeDistributionChart"];
+const _c7 = ["promptTokenDistributionChart"];
+const _c8 = ["promptCostDistributionChart"];
+const _c9 = ["promptCountByNameChart"];
+function AIAgentRunAnalyticsComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Loading analytics data...");
+    i0.ɵɵelementEnd()();
+} }
+function AIAgentRunAnalyticsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 18);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadData()); });
+    i0.ɵɵtext(5, "Retry");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.error);
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵtext(1, " Overview ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.statusBreakdown.failed, " failed");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.failed, " failed");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25)(2, "div", 26);
+    i0.ɵɵelement(3, "i", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 28)(5, "h3");
+    i0.ɵɵtext(6, "Total Prompts");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 29);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 30)(10, "span", 31);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template, 2, 1, "span", 32);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 25)(14, "div", 33);
+    i0.ɵɵelement(15, "i", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 28)(17, "h3");
+    i0.ɵɵtext(18, "Total Actions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 29);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 30)(22, "span", 31);
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(24, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template, 2, 1, "span", 32);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(25, "div", 25)(26, "div", 35);
+    i0.ɵɵelement(27, "i", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "div", 28)(29, "h3");
+    i0.ɵɵtext(30, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "div", 29);
+    i0.ɵɵtext(32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "div", 30)(34, "span");
+    i0.ɵɵtext(35);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(36, "div", 25)(37, "div", 37);
+    i0.ɵɵelement(38, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "div", 28)(40, "h3");
+    i0.ɵɵtext(41, "Execution Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "div", 29);
+    i0.ɵɵtext(43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "div", 30)(45, "span");
+    i0.ɵɵtext(46);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.promptMetrics.totalCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.statusBreakdown.success, " successful");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.statusBreakdown.failed > 0);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.actionMetrics.totalCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.success, " successful");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.actionMetrics.statusBreakdown.failed > 0);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.tokenUsage.totalInput + ctx_r1.promptMetrics.tokenUsage.totalOutput, " tokens");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.promptMetrics.totalExecutionTime + ctx_r1.actionMetrics.totalExecutionTime));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.timelineMetrics.totalSteps, " total steps");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 27);
+    i0.ɵɵtext(1, " Prompt Analytics ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewMode === "grid" ? "fa-expand-arrows-alt" : "fa-compress-arrows-alt");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No prompt executions found in this agent run.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 53);
+    i0.ɵɵtext(5, "This agent run may have only executed actions without any AI prompts.");
+    i0.ɵɵelementEnd()();
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵelement(1, "span", 71);
+    i0.ɵɵelementStart(2, "span", 72);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.getModelColor(item_r6.key));
+    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_div_3_ng_template_7_div_3_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template, 4, 5, "div", 69);
+    i0.ɵɵpipe(2, "keyvalue");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx_r1.promptMetrics.byModel));
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("modelDistribution")); });
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵelement(4, "i", 57);
+    i0.ɵɵtext(5, " Prompts by Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 58);
+    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
+    i0.ɵɵelement(10, "div", 61, 0);
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template, 3, 3, "div", 62);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("executionTime")); });
+    i0.ɵɵelementStart(15, "h3");
+    i0.ɵɵelement(16, "i", 38);
+    i0.ɵɵtext(17, " Average Execution Time by Vendor");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 58);
+    i0.ɵɵelement(19, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
+    i0.ɵɵelement(22, "div", 63, 1);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "div", 55)(25, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_25_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("costByVendor")); });
+    i0.ɵɵelementStart(26, "h3");
+    i0.ɵɵelement(27, "i", 36);
+    i0.ɵɵtext(28, " Cost Distribution by Vendor");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "button", 58);
+    i0.ɵɵelement(30, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "div", 59)(32, "div", 60);
+    i0.ɵɵelement(33, "div", 64, 2);
+    i0.ɵɵelementStart(35, "div", 65);
+    i0.ɵɵtext(36);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(37, "div", 55)(38, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template_div_click_38_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("tokenUsage")); });
+    i0.ɵɵelementStart(39, "h3");
+    i0.ɵɵelement(40, "i", 66);
+    i0.ɵɵtext(41, " Token Usage by Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "button", 58);
+    i0.ɵɵelement(43, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(44, "div", 59)(45, "div", 60);
+    i0.ɵɵelement(46, "div", 67, 3);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["modelDistribution"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["modelDistribution"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.byModel.size > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["executionTime"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["executionTime"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["costByVendor"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["costByVendor"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("Total: ", ctx_r1.formatCost(ctx_r1.promptMetrics.costBreakdown.totalCost), "");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["tokenUsage"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["tokenUsage"] ? "fa-compress" : "fa-expand");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 73)(1, "div", 55)(2, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptTime")); });
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵelement(4, "i", 74);
+    i0.ɵɵtext(5, " Average Execution Time by Prompt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 58);
+    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
+    i0.ɵɵelement(10, "div", 75, 4);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 55)(13, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptToken")); });
+    i0.ɵɵelementStart(14, "h3");
+    i0.ɵɵelement(15, "i", 76);
+    i0.ɵɵtext(16, " Token Usage by Prompt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "button", 58);
+    i0.ɵɵelement(18, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 59)(20, "div", 60);
+    i0.ɵɵelement(21, "div", 77, 5);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(23, "div", 55)(24, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCost")); });
+    i0.ɵɵelementStart(25, "h3");
+    i0.ɵɵelement(26, "i", 57);
+    i0.ɵɵtext(27, " Cost Distribution by Prompt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "button", 58);
+    i0.ɵɵelement(29, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "div", 59)(31, "div", 60);
+    i0.ɵɵelement(32, "div", 78, 6);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 55)(35, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template_div_click_35_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("promptCount")); });
+    i0.ɵɵelementStart(36, "h3");
+    i0.ɵɵelement(37, "i", 79);
+    i0.ɵɵtext(38, " Prompt Execution Count");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "button", 58);
+    i0.ɵɵelement(40, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(41, "div", 59)(42, "div", 60);
+    i0.ɵɵelement(43, "div", 80, 7);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptTime"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptTime"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptToken"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptToken"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptCost"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCost"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["promptCount"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["promptCount"] ? "fa-compress" : "fa-expand");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td")(10, "span", 83);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const prompt_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(prompt_r8.key);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(prompt_r8.value.count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(prompt_r8.value.avgTime));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(prompt_r8.value.totalTime));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Prompt Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Count");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Avg Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Total Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th");
+    i0.ɵɵtext(13, "Success Rate");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "tbody");
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template, 12, 5, "tr", 82);
+    i0.ɵɵpipe(16, "keyvalue");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(15);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 1, ctx_r1.promptMetrics.byPrompt));
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template, 4, 2, "div", 41)(2, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template, 6, 0, "div", 42)(3, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template, 48, 14, "div", 43)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template, 45, 12, "div", 44);
+    i0.ɵɵelementStart(5, "div", 45)(6, "button", 46);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.promptDetailsExpanded = !ctx_r1.promptDetailsExpanded); });
+    i0.ɵɵelement(7, "i", 47);
+    i0.ɵɵtext(8, " Detailed Prompt Metrics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template, 17, 3, "div", 48);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.totalCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.totalCount === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.totalCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.promptMetrics.totalCount > 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.promptDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.promptDetailsExpanded);
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+    i0.ɵɵtext(1, " Action Analytics ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td")(8, "span", 83);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "td");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r10.key);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(action_r10.value.count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(action_r10.value.avgTime));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("high", action_r10.value.successRate > 0.9)("medium", action_r10.value.successRate > 0.7 && action_r10.value.successRate <= 0.9)("low", action_r10.value.successRate <= 0.7);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (action_r10.value.successRate * 100).toFixed(1), "% ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r10.key));
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Action Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Count");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Avg Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th");
+    i0.ɵɵtext(13, "Type");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(14, "tbody");
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template, 12, 11, "tr", 82);
+    i0.ɵɵpipe(16, "keyvalue");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(15);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 1, ctx_r1.actionMetrics.byAction));
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 98);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const error_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", error_r11.count, "x");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(error_r11.message);
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91)(1, "h3");
+    i0.ɵɵelement(2, "i", 92);
+    i0.ɵɵtext(3, " Common Errors ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 93);
+    i0.ɵɵtext(5, " This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 94);
+    i0.ɵɵtemplate(7, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template, 5, 2, "div", 95);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngForOf", ctx_r1.getTopErrors());
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99);
+    i0.ɵɵelement(1, "i", 100);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No action errors detected in this run. All actions completed successfully!");
+    i0.ɵɵelementEnd()();
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 54)(2, "div", 55)(3, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("actionSuccess")); });
+    i0.ɵɵelementStart(4, "h3");
+    i0.ɵɵelement(5, "i", 84);
+    i0.ɵɵtext(6, " Action Success Rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 58);
+    i0.ɵɵelement(8, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 59)(10, "div", 60);
+    i0.ɵɵelement(11, "div", 85, 8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleChartExpansion("stepType")); });
+    i0.ɵɵelementStart(15, "h3");
+    i0.ɵɵelement(16, "i", 86);
+    i0.ɵɵtext(17, " Step Type Distribution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 58);
+    i0.ɵɵelement(19, "i", 47);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
+    i0.ɵɵelement(22, "div", 87, 9);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(24, "div", 45)(25, "button", 46);
+    i0.ɵɵlistener("click", function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.actionDetailsExpanded = !ctx_r1.actionDetailsExpanded); });
+    i0.ɵɵelement(26, "i", 47);
+    i0.ɵɵtext(27, " Detailed Action Metrics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(28, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template, 17, 3, "div", 48);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "div", 88);
+    i0.ɵɵtemplate(30, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template, 8, 1, "div", 89)(31, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template, 4, 0, "div", 90);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["actionSuccess"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["actionSuccess"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedCharts["stepType"]);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedCharts["stepType"] ? "fa-compress" : "fa-expand");
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngClass", ctx_r1.actionDetailsExpanded ? "fa-chevron-up" : "fa-chevron-down");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.actionDetailsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.actionMetrics.errorAnalysis.size > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.actionMetrics.errorAnalysis.size === 0);
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 101);
+    i0.ɵɵtext(1, " Model Performance Comparison ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "td");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "td");
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "number");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "td");
+    i0.ɵɵtext(17);
+    i0.ɵɵpipe(18, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const model_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(model_r12.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(model_r12.vendor);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(model_r12.count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(model_r12.avgTime));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatCost(model_r12.totalCost));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatCost(model_r12.avgCost));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(15, 8, model_r12.inputTokens, "1.0-0"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r12.outputTokens, "1.0-0"));
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 102)(2, "table")(3, "thead")(4, "tr")(5, "th");
+    i0.ɵɵtext(6, "Model");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th");
+    i0.ɵɵtext(8, "Vendor");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "th");
+    i0.ɵɵtext(10, "Prompts");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "th");
+    i0.ɵɵtext(12, "Avg Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "th");
+    i0.ɵɵtext(14, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "th");
+    i0.ɵɵtext(16, "Avg Cost/Prompt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "th");
+    i0.ɵɵtext(18, "Input Tokens");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "th");
+    i0.ɵɵtext(20, "Output Tokens");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(21, "tbody");
+    i0.ɵɵtemplate(22, AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template, 19, 14, "tr", 82);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(22);
+    i0.ɵɵproperty("ngForOf", ctx_r1.getModelPerformanceData());
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 103);
+    i0.ɵɵtext(1, " Execution Timeline Analysis ");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span", 112);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 113);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 114);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const type_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getStepTypeIcon(type_r13.key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(type_r13.key);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(type_r13.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", (type_r13.value / ctx_r1.timelineMetrics.totalSteps * 100).toFixed(1), "%)");
+} }
+function AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 104)(2, "div", 105)(3, "span", 106);
+    i0.ɵɵtext(4, "Total Steps");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 107);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 105)(8, "span", 106);
+    i0.ɵɵtext(9, "Parallel Executions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 107);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 105)(13, "span", 106);
+    i0.ɵɵtext(14, "Max Nesting Depth");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 107);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 105)(18, "span", 106);
+    i0.ɵɵtext(19, "Sub-Agent Runs");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 107);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 108)(23, "h3");
+    i0.ɵɵtext(24, "Steps by Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 109);
+    i0.ɵɵtemplate(26, AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template, 8, 4, "div", 110);
+    i0.ɵɵpipe(27, "keyvalue");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.timelineMetrics.totalSteps);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.timelineMetrics.parallelExecutions);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.timelineMetrics.deepestNesting);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.subAgentRuns.length);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(27, 5, ctx_r1.timelineMetrics.stepsByType));
+} }
+function AIAgentRunAnalyticsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 20);
+    i0.ɵɵtemplate(3, AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template, 2, 0, "ng-template", 21)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template, 47, 10, "ng-template", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "kendo-panelbar-item", 20);
+    i0.ɵɵtemplate(6, AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template, 2, 0, "ng-template", 21)(7, AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template, 10, 6, "ng-template", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "kendo-panelbar-item", 20);
+    i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template, 2, 0, "ng-template", 21)(10, AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template, 32, 10, "ng-template", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "kendo-panelbar-item", 20);
+    i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template, 2, 0, "ng-template", 21)(13, AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template, 23, 1, "ng-template", 22);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "kendo-panelbar-item", 20);
+    i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template, 2, 0, "ng-template", 21)(16, AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template, 28, 7, "ng-template", 22);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("expanded", true);
+} }
+export class AIAgentRunAnalyticsComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+        // Chart expansion states
+        this.expandedCharts = {
+            modelDistribution: false,
+            executionTime: false,
+            costByVendor: false,
+            tokenUsage: false,
+            promptTime: false,
+            promptToken: false,
+            promptCost: false,
+            promptCount: false,
+            actionSuccess: false,
+            stepType: false
+        };
+        this.viewMode = 'grid';
+        // Loading state
+        this.isLoading = true;
+        this.error = null;
+        // Data
+        this.agentRun = null;
+        this.allPromptRuns = [];
+        this.allActionLogs = [];
+        this.allSteps = [];
+        this.subAgentRuns = [];
+        // Metrics
+        this.promptMetrics = this.initializePromptMetrics();
+        this.actionMetrics = this.initializeActionMetrics();
+        this.timelineMetrics = this.initializeTimelineMetrics();
+        // Expanded sections
+        this.promptDetailsExpanded = false;
+        this.actionDetailsExpanded = false;
+        // Expansion panel states
+        this.panelStates = {
+            summary: true,
+            prompts: true,
+            actions: true,
+            models: true,
+            timeline: true
+        };
+    }
+    ngOnInit() {
+        if (this.agentRunId) {
+            this.loadData();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    ngAfterViewInit() {
+        // Charts will be rendered after data is loaded
+    }
+    async loadData() {
+        this.isLoading = true;
+        this.error = null;
+        try {
+            // Load all data including nested sub-agent runs
+            await this.loadAllRunData();
+            // Calculate metrics
+            this.calculatePromptMetrics();
+            this.calculateActionMetrics();
+            this.calculateTimelineMetrics();
+            // Prepare chart data
+            this.prepareChartData();
+            // Render charts after view updates
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.renderCharts();
+            });
+        }
+        catch (error) {
+            console.error('Error loading analytics data:', error);
+            this.error = 'Failed to load analytics data';
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async loadAllRunData() {
+        const rv = new RunView();
+        // Get all agent runs in the hierarchy (including the main run and all sub-agent runs)
+        const agentRunIds = await this.getAllAgentRunIds(this.agentRunId);
+        console.log('Loading analytics for agent run IDs:', agentRunIds);
+        console.log('Number of agent run IDs:', agentRunIds.length);
+        // Batch load all data
+        const results = await rv.RunViews([
+            // Main agent run
+            {
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: `ID = '${this.agentRunId}'`,
+            },
+            // All sub-agent runs
+            {
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: agentRunIds.length > 1 ? `ID IN ('${agentRunIds.slice(1).join("','")}')` : `ID = '00000000-0000-0000-0000-000000000000'`,
+            },
+            // All prompt runs for all agent runs - linked through AI Agent Run Steps
+            {
+                EntityName: 'MJ: AI Prompt Runs',
+                ExtraFilter: `ID IN (SELECT TargetLogID FROM __mj.vwAIAgentRunSteps WHERE AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompt')`,
+            },
+            // All action logs - need to get via steps
+            {
+                EntityName: 'MJ: AI Agent Run Steps',
+                ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Actions'`,
+            },
+            // All steps for timeline analysis
+            {
+                EntityName: 'MJ: AI Agent Run Steps',
+                ExtraFilter: `AgentRunID IN ('${agentRunIds.join("','")}')`,
+                ResultType: 'entity_object'
+            }
+        ]);
+        // Process results
+        console.log('RunViews results:', results.map((r, i) => ({
+            index: i,
+            success: r.Success,
+            count: r.Results?.length || 0,
+            errorMessage: r.ErrorMessage
+        })));
+        if (results[0].Success && results[0].Results && results[0].Results.length > 0) {
+            this.agentRun = results[0].Results[0];
+        }
+        if (results[1].Success) {
+            this.subAgentRuns = results[1].Results || [];
+        }
+        if (results[2].Success) {
+            this.allPromptRuns = results[2].Results || [];
+            console.log(`Found ${this.allPromptRuns.length} prompt runs for agent run IDs:`, agentRunIds);
+            console.log('Prompt runs query:', `ID IN (SELECT TargetLogID FROM __mj.vwAIAgentRunSteps WHERE AgentRunID IN ('${agentRunIds.join("','")}') AND StepType = 'Prompts')`);
+            if (this.allPromptRuns.length > 0) {
+                console.log('First prompt run sample:', this.allPromptRuns[0]);
+            }
+        }
+        else {
+            console.error('Failed to load prompt runs:', results[2].ErrorMessage);
+        }
+        if (results[3].Success) {
+            const actionSteps = results[3].Results || [];
+            // Now load the actual action logs
+            if (actionSteps.length > 0) {
+                const actionLogIds = actionSteps
+                    .map(s => s.TargetLogID)
+                    .filter(id => id != null);
+                if (actionLogIds.length > 0) {
+                    const actionResult = await rv.RunView({
+                        EntityName: 'Action Execution Logs',
+                        ExtraFilter: `ID IN ('${actionLogIds.join("','")}')`
+                    });
+                    if (actionResult.Success) {
+                        this.allActionLogs = actionResult.Results || [];
+                    }
+                }
+            }
+        }
+        if (results[4].Success) {
+            this.allSteps = results[4].Results || [];
+        }
+    }
+    async getAllAgentRunIds(rootRunId) {
+        const allIds = [rootRunId];
+        const rv = new RunView();
+        // Recursively get all sub-agent run IDs
+        const getSubRunIds = async (parentId, depth = 0) => {
+            const result = await rv.RunView({
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: `ParentRunID = '${parentId}'`,
+                ResultType: 'entity_object'
+            });
+            if (result.Success && result.Results) {
+                console.log(`Found ${result.Results.length} sub-agent runs at depth ${depth} for parent ${parentId}`);
+                for (const subRun of result.Results) {
+                    allIds.push(subRun.ID);
+                    await getSubRunIds(subRun.ID, depth + 1); // Recursive call
+                }
+            }
+        };
+        await getSubRunIds(rootRunId);
+        console.log(`Total agent run IDs found: ${allIds.length}`);
+        return allIds;
+    }
+    initializePromptMetrics() {
+        return {
+            totalCount: 0,
+            totalExecutionTime: 0,
+            averageExecutionTime: 0,
+            byModel: new Map(),
+            byVendor: new Map(),
+            byPrompt: new Map(),
+            statusBreakdown: { success: 0, failed: 0, timeout: 0 },
+            costBreakdown: { totalCost: 0, byModel: new Map(), byVendor: new Map() },
+            tokenUsage: { totalInput: 0, totalOutput: 0, byModel: new Map() }
+        };
+    }
+    initializeActionMetrics() {
+        return {
+            totalCount: 0,
+            totalExecutionTime: 0,
+            averageExecutionTime: 0,
+            byAction: new Map(),
+            byType: new Map(),
+            statusBreakdown: { success: 0, failed: 0, timeout: 0 },
+            errorAnalysis: new Map()
+        };
+    }
+    initializeTimelineMetrics() {
+        return {
+            totalSteps: 0,
+            stepsByType: new Map(),
+            parallelExecutions: 0,
+            deepestNesting: 0,
+            criticalPath: { steps: [], totalTime: 0 }
+        };
+    }
+    calculatePromptMetrics() {
+        const metrics = this.initializePromptMetrics();
+        for (const promptRun of this.allPromptRuns) {
+            metrics.totalCount++;
+            // Calculate execution time
+            const execTime = this.calculateExecutionTime(promptRun.RunAt, promptRun.CompletedAt);
+            metrics.totalExecutionTime += execTime;
+            // Update model metrics
+            const model = promptRun.Model || 'Unknown';
+            const modelMetric = metrics.byModel.get(model) || { count: 0, totalTime: 0, avgTime: 0 };
+            modelMetric.count++;
+            modelMetric.totalTime += execTime;
+            modelMetric.avgTime = modelMetric.totalTime / modelMetric.count;
+            metrics.byModel.set(model, modelMetric);
+            // Update vendor metrics
+            const vendor = promptRun.Vendor || 'Unknown';
+            const vendorMetric = metrics.byVendor.get(vendor) || { count: 0, totalTime: 0, avgTime: 0 };
+            vendorMetric.count++;
+            vendorMetric.totalTime += execTime;
+            vendorMetric.avgTime = vendorMetric.totalTime / vendorMetric.count;
+            metrics.byVendor.set(vendor, vendorMetric);
+            // Update prompt name metrics
+            const promptName = promptRun.Prompt || 'Unknown';
+            const promptMetric = metrics.byPrompt.get(promptName) || { count: 0, totalTime: 0, avgTime: 0 };
+            promptMetric.count++;
+            promptMetric.totalTime += execTime;
+            promptMetric.avgTime = promptMetric.totalTime / promptMetric.count;
+            metrics.byPrompt.set(promptName, promptMetric);
+            // Status breakdown
+            if (promptRun.Success) {
+                metrics.statusBreakdown.success++;
+            }
+            else if (promptRun.ErrorMessage?.includes('timeout')) {
+                metrics.statusBreakdown.timeout++;
+            }
+            else {
+                metrics.statusBreakdown.failed++;
+            }
+            // Cost tracking
+            const cost = promptRun.TotalCost || 0;
+            metrics.costBreakdown.totalCost += cost;
+            const modelCost = metrics.costBreakdown.byModel.get(model) || 0;
+            metrics.costBreakdown.byModel.set(model, modelCost + cost);
+            const vendorCost = metrics.costBreakdown.byVendor.get(vendor) || 0;
+            metrics.costBreakdown.byVendor.set(vendor, vendorCost + cost);
+            // Token usage
+            const inputTokens = promptRun.TokensPrompt || 0;
+            const outputTokens = promptRun.TokensCompletion || 0;
+            metrics.tokenUsage.totalInput += inputTokens;
+            metrics.tokenUsage.totalOutput += outputTokens;
+            const modelTokens = metrics.tokenUsage.byModel.get(model) || { input: 0, output: 0 };
+            modelTokens.input += inputTokens;
+            modelTokens.output += outputTokens;
+            metrics.tokenUsage.byModel.set(model, modelTokens);
+        }
+        // Calculate overall average
+        if (metrics.totalCount > 0) {
+            metrics.averageExecutionTime = metrics.totalExecutionTime / metrics.totalCount;
+        }
+        this.promptMetrics = metrics;
+    }
+    calculateActionMetrics() {
+        const metrics = this.initializeActionMetrics();
+        for (const actionLog of this.allActionLogs) {
+            metrics.totalCount++;
+            // Calculate execution time
+            const execTime = this.calculateExecutionTime(actionLog.StartedAt, actionLog.EndedAt);
+            metrics.totalExecutionTime += execTime;
+            // Update action metrics
+            const actionName = actionLog.Action || 'Unknown';
+            const actionMetric = metrics.byAction.get(actionName) || { count: 0, totalTime: 0, avgTime: 0, successRate: 0 };
+            actionMetric.count++;
+            actionMetric.totalTime += execTime;
+            actionMetric.avgTime = actionMetric.totalTime / actionMetric.count;
+            // Track success rate
+            if (actionLog.ResultCode === 'Success') {
+                const successCount = (actionMetric.successRate * (actionMetric.count - 1) + 1);
+                actionMetric.successRate = successCount / actionMetric.count;
+            }
+            else {
+                actionMetric.successRate = (actionMetric.successRate * (actionMetric.count - 1)) / actionMetric.count;
+            }
+            metrics.byAction.set(actionName, actionMetric);
+            // Update type metrics
+            // Action type is not directly available on ActionExecutionLogEntity
+            const actionType = 'Action'; // Generic type for now
+            const typeMetric = metrics.byType.get(actionType) || { count: 0, totalTime: 0, avgTime: 0 };
+            typeMetric.count++;
+            typeMetric.totalTime += execTime;
+            typeMetric.avgTime = typeMetric.totalTime / typeMetric.count;
+            metrics.byType.set(actionType, typeMetric);
+            // Status breakdown
+            if (actionLog.ResultCode === 'Success') {
+                metrics.statusBreakdown.success++;
+            }
+            else if (actionLog.ResultCode === 'Timeout') {
+                metrics.statusBreakdown.timeout++;
+            }
+            else {
+                metrics.statusBreakdown.failed++;
+                // Error analysis
+                if (actionLog.Message) {
+                    const errorCount = metrics.errorAnalysis.get(actionLog.Message) || 0;
+                    metrics.errorAnalysis.set(actionLog.Message, errorCount + 1);
+                }
+            }
+        }
+        // Calculate overall average
+        if (metrics.totalCount > 0) {
+            metrics.averageExecutionTime = metrics.totalExecutionTime / metrics.totalCount;
+        }
+        this.actionMetrics = metrics;
+    }
+    calculateTimelineMetrics() {
+        const metrics = this.initializeTimelineMetrics();
+        metrics.totalSteps = this.allSteps.length;
+        // Count steps by type
+        for (const step of this.allSteps) {
+            const type = step.StepType || 'Unknown';
+            const count = metrics.stepsByType.get(type) || 0;
+            metrics.stepsByType.set(type, count + 1);
+        }
+        // TODO: Calculate parallel executions, deepest nesting, and critical path
+        // This would require more complex analysis of the step relationships
+        this.timelineMetrics = metrics;
+    }
+    calculateExecutionTime(start, end) {
+        if (!start || !end)
+            return 0;
+        return new Date(end).getTime() - new Date(start).getTime();
+    }
+    prepareChartData() {
+        // Model distribution pie chart
+        this.modelDistributionChartData = {
+            labels: Array.from(this.promptMetrics.byModel.keys()),
+            datasets: [{
+                    data: Array.from(this.promptMetrics.byModel.values()).map(m => m.count),
+                    backgroundColor: this.generateColors(this.promptMetrics.byModel.size)
+                }]
+        };
+        // Execution time by vendor bar chart
+        this.executionTimeChartData = {
+            labels: Array.from(this.promptMetrics.byVendor.keys()),
+            datasets: [{
+                    label: 'Average Execution Time (ms)',
+                    data: Array.from(this.promptMetrics.byVendor.values()).map(v => v.avgTime),
+                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1
+                }]
+        };
+        // Cost by vendor doughnut chart
+        this.costByVendorChartData = {
+            labels: Array.from(this.promptMetrics.costBreakdown.byVendor.keys()),
+            datasets: [{
+                    data: Array.from(this.promptMetrics.costBreakdown.byVendor.values()),
+                    backgroundColor: this.generateColors(this.promptMetrics.costBreakdown.byVendor.size)
+                }]
+        };
+        // Token usage stacked bar chart
+        const tokenModels = Array.from(this.promptMetrics.tokenUsage.byModel.keys());
+        this.tokenUsageChartData = {
+            labels: tokenModels,
+            datasets: [
+                {
+                    label: 'Input Tokens',
+                    data: tokenModels.map(m => this.promptMetrics.tokenUsage.byModel.get(m)?.input || 0),
+                    backgroundColor: 'rgba(255, 99, 132, 0.5)'
+                },
+                {
+                    label: 'Output Tokens',
+                    data: tokenModels.map(m => this.promptMetrics.tokenUsage.byModel.get(m)?.output || 0),
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)'
+                }
+            ]
+        };
+        // Action success rate bar chart
+        this.actionSuccessRateChartData = {
+            labels: Array.from(this.actionMetrics.byAction.keys()),
+            datasets: [{
+                    label: 'Success Rate (%)',
+                    data: Array.from(this.actionMetrics.byAction.values()).map(a => a.successRate * 100),
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+        };
+        // Step type distribution pie chart
+        this.stepTypeDistributionChartData = {
+            labels: Array.from(this.timelineMetrics.stepsByType.keys()),
+            datasets: [{
+                    data: Array.from(this.timelineMetrics.stepsByType.values()),
+                    backgroundColor: this.generateColors(this.timelineMetrics.stepsByType.size)
+                }]
+        };
+    }
+    generateColors(count) {
+        const colors = [
+            'rgba(255, 99, 132, 0.5)',
+            'rgba(54, 162, 235, 0.5)',
+            'rgba(255, 206, 86, 0.5)',
+            'rgba(75, 192, 192, 0.5)',
+            'rgba(153, 102, 255, 0.5)',
+            'rgba(255, 159, 64, 0.5)',
+            'rgba(199, 199, 199, 0.5)',
+            'rgba(83, 102, 255, 0.5)',
+            'rgba(255, 99, 255, 0.5)',
+            'rgba(99, 255, 132, 0.5)'
+        ];
+        // Repeat colors if needed
+        const result = [];
+        for (let i = 0; i < count; i++) {
+            result.push(colors[i % colors.length]);
+        }
+        return result;
+    }
+    formatDuration(ms) {
+        if (ms < 1000)
+            return `${ms.toFixed(0)}ms`;
+        if (ms < 60000)
+            return `${(ms / 1000).toFixed(1)}s`;
+        if (ms < 3600000)
+            return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+        return `${Math.floor(ms / 3600000)}h ${Math.floor((ms % 3600000) / 60000)}m`;
+    }
+    formatCost(cost) {
+        if (cost < 0.01)
+            return `$${cost.toFixed(4)}`;
+        if (cost < 1)
+            return `$${cost.toFixed(3)}`;
+        return `$${cost.toFixed(2)}`;
+    }
+    refresh() {
+        this.loadData();
+    }
+    renderCharts() {
+        if (!this.modelDistributionChart)
+            return; // Charts not ready yet
+        this.renderModelDistributionChart();
+        this.renderExecutionTimeChart();
+        this.renderCostByVendorChart();
+        this.renderTokenUsageChart();
+        this.renderActionSuccessRateChart();
+        this.renderStepTypeChart();
+        // Additional prompt analytics charts
+        this.renderPromptTimeDistributionChart();
+        this.renderPromptTokenDistributionChart();
+        this.renderPromptCostDistributionChart();
+        this.renderPromptCountByNameChart();
+    }
+    renderModelDistributionChart() {
+        const element = this.modelDistributionChart.nativeElement;
+        const data = Array.from(this.promptMetrics.byModel.entries()).map(([name, metrics]) => ({
+            name,
+            value: metrics.count
+        }));
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const isExpanded = this.expandedCharts['modelDistribution'];
+        const width = isExpanded ? 500 : 300;
+        const height = isExpanded ? 400 : 220;
+        const radius = Math.min(width, height) / 2 - 40;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${width / 2}, ${height / 2})`);
+        const color = d3.scaleOrdinal(d3.schemeCategory10);
+        const pie = d3.pie()
+            .value(d => d.value)
+            .sort(null);
+        const arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+        const arcs = svg.selectAll('arc')
+            .data(pie(data))
+            .enter()
+            .append('g');
+        arcs.append('path')
+            .attr('d', arc)
+            .attr('fill', (d, i) => color(i.toString()))
+            .attr('stroke', 'white')
+            .style('stroke-width', '2px');
+        // Add labels
+        arcs.append('text')
+            .attr('transform', (d) => `translate(${arc.centroid(d)})`)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'white')
+            .text((d) => d.data.value > 0 ? d.data.value : '');
+        // Add title
+        svg.append('text')
+            .attr('x', 0)
+            .attr('y', -radius - 25)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Prompts by Model');
+    }
+    renderExecutionTimeChart() {
+        const element = this.executionTimeChart.nativeElement;
+        const data = Array.from(this.promptMetrics.byVendor.entries()).map(([name, metrics]) => ({
+            name,
+            value: metrics.avgTime
+        }));
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const isExpanded = this.expandedCharts['executionTime'];
+        const margin = { top: 40, right: 20, bottom: 70, left: 60 };
+        const width = (isExpanded ? 600 : 320) - margin.left - margin.right;
+        const height = (isExpanded ? 350 : 200) - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x = d3.scaleBand()
+            .range([0, width])
+            .domain(data.map(d => d.name))
+            .padding(0.1);
+        const y = d3.scaleLinear()
+            .domain([0, d3.max(data, d => d.value) || 0])
+            .range([height, 0]);
+        // Add bars
+        svg.selectAll('.bar')
+            .data(data)
+            .enter().append('rect')
+            .attr('class', 'bar')
+            .attr('x', d => x(d.name) || 0)
+            .attr('width', x.bandwidth())
+            .attr('y', d => y(d.value))
+            .attr('height', d => height - y(d.value))
+            .attr('fill', '#36a2eb');
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y).tickFormat(d => `${d}ms`));
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Average Execution Time by Vendor');
+    }
+    renderCostByVendorChart() {
+        const element = this.costByVendorChart.nativeElement;
+        const data = Array.from(this.promptMetrics.costBreakdown.byVendor.entries()).map(([name, cost]) => ({
+            name,
+            value: cost
+        }));
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const width = 300;
+        const height = 220;
+        const radius = Math.min(width, height) / 2 - 40;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${width / 2}, ${height / 2})`);
+        const color = d3.scaleOrdinal(d3.schemeSet2);
+        const pie = d3.pie()
+            .value(d => d.value)
+            .sort(null);
+        const arc = d3.arc()
+            .innerRadius(radius * 0.5) // Doughnut chart
+            .outerRadius(radius);
+        const arcs = svg.selectAll('arc')
+            .data(pie(data))
+            .enter()
+            .append('g');
+        arcs.append('path')
+            .attr('d', arc)
+            .attr('fill', (d, i) => color(i.toString()))
+            .attr('stroke', 'white')
+            .style('stroke-width', '2px');
+        // Add title
+        svg.append('text')
+            .attr('x', 0)
+            .attr('y', -radius - 25)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Cost Distribution by Vendor');
+    }
+    renderTokenUsageChart() {
+        const element = this.tokenUsageChart.nativeElement;
+        const models = Array.from(this.promptMetrics.tokenUsage.byModel.keys());
+        const inputData = models.map(model => ({
+            model,
+            type: 'Input',
+            value: this.promptMetrics.tokenUsage.byModel.get(model)?.input || 0
+        }));
+        const outputData = models.map(model => ({
+            model,
+            type: 'Output',
+            value: this.promptMetrics.tokenUsage.byModel.get(model)?.output || 0
+        }));
+        const data = [...inputData, ...outputData];
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const margin = { top: 40, right: 100, bottom: 70, left: 60 };
+        const width = 320 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x0 = d3.scaleBand()
+            .rangeRound([0, width])
+            .paddingInner(0.1)
+            .domain(models);
+        const x1 = d3.scaleBand()
+            .padding(0.05)
+            .domain(['Input', 'Output'])
+            .rangeRound([0, x0.bandwidth()]);
+        const y = d3.scaleLinear()
+            .rangeRound([height, 0])
+            .domain([0, d3.max(data, d => d.value) || 0]);
+        const color = d3.scaleOrdinal()
+            .domain(['Input', 'Output'])
+            .range(['#ff6384', '#4bc0c0']);
+        const grouped = d3.group(data, d => d.model);
+        svg.append('g')
+            .selectAll('g')
+            .data(grouped)
+            .enter().append('g')
+            .attr('transform', d => `translate(${x0(d[0]) || 0},0)`)
+            .selectAll('rect')
+            .data(d => d[1])
+            .enter().append('rect')
+            .attr('x', d => x1(d.type) || 0)
+            .attr('y', d => y(d.value))
+            .attr('width', x1.bandwidth())
+            .attr('height', d => height - y(d.value))
+            .attr('fill', d => color(d.type));
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x0))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y));
+        // Add legend
+        const legend = svg.append('g')
+            .attr('font-family', 'sans-serif')
+            .attr('font-size', 10)
+            .attr('text-anchor', 'end')
+            .selectAll('g')
+            .data(['Input', 'Output'])
+            .enter().append('g')
+            .attr('transform', (d, i) => `translate(0,${i * 20})`);
+        legend.append('rect')
+            .attr('x', width + 70)
+            .attr('width', 19)
+            .attr('height', 19)
+            .attr('fill', d => color(d));
+        legend.append('text')
+            .attr('x', width + 65)
+            .attr('y', 9.5)
+            .attr('dy', '0.32em')
+            .text(d => d);
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Token Usage by Model');
+    }
+    renderActionSuccessRateChart() {
+        const element = this.actionSuccessRateChart.nativeElement;
+        const data = Array.from(this.actionMetrics.byAction.entries()).map(([name, metrics]) => ({
+            name,
+            value: metrics.successRate * 100
+        }));
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const margin = { top: 40, right: 20, bottom: 100, left: 60 };
+        const width = 320 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x = d3.scaleBand()
+            .range([0, width])
+            .domain(data.map(d => d.name))
+            .padding(0.1);
+        const y = d3.scaleLinear()
+            .domain([0, 100])
+            .range([height, 0]);
+        // Add bars with color based on success rate
+        svg.selectAll('.bar')
+            .data(data)
+            .enter().append('rect')
+            .attr('class', 'bar')
+            .attr('x', d => x(d.name) || 0)
+            .attr('width', x.bandwidth())
+            .attr('y', d => y(d.value))
+            .attr('height', d => height - y(d.value))
+            .attr('fill', d => d.value > 90 ? '#4bc0c0' : d.value > 70 ? '#ffce56' : '#ff6384');
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y).tickFormat(d => `${d}%`));
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Action Success Rates');
+    }
+    renderStepTypeChart() {
+        const element = this.stepTypeChart.nativeElement;
+        const data = Array.from(this.timelineMetrics.stepsByType.entries()).map(([name, value]) => ({
+            name,
+            value
+        }));
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const width = 300;
+        const height = 220;
+        const radius = Math.min(width, height) / 2 - 40;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${width / 2}, ${height / 2})`);
+        const color = d3.scaleOrdinal(d3.schemeSet3);
+        const pie = d3.pie()
+            .value(d => d.value)
+            .sort(null);
+        const arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+        const arcs = svg.selectAll('arc')
+            .data(pie(data))
+            .enter()
+            .append('g');
+        arcs.append('path')
+            .attr('d', arc)
+            .attr('fill', (d, i) => color(i.toString()))
+            .attr('stroke', 'white')
+            .style('stroke-width', '2px');
+        // Add labels
+        arcs.append('text')
+            .attr('transform', (d) => {
+            const centroid = arc.centroid(d);
+            return `translate(${centroid})`;
+        })
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('fill', 'white')
+            .text((d) => d.data.value > 0 ? d.data.value : '');
+        // Add title
+        svg.append('text')
+            .attr('x', 0)
+            .attr('y', -radius - 25)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Step Type Distribution');
+    }
+    calculatePromptSuccessRate(promptName) {
+        const successfulRuns = this.allPromptRuns.filter(run => run.Prompt === promptName && run.Success === true).length;
+        const totalRuns = this.allPromptRuns.filter(run => run.Prompt === promptName).length;
+        if (totalRuns === 0)
+            return '0';
+        return ((successfulRuns / totalRuns) * 100).toFixed(1);
+    }
+    toggleChartExpansion(chartKey) {
+        this.expandedCharts[chartKey] = !this.expandedCharts[chartKey];
+        // Re-render the chart after expansion state changes
+        setTimeout(() => {
+            this.renderCharts();
+        }, 100);
+    }
+    toggleViewMode() {
+        if (this.viewMode === 'grid') {
+            this.viewMode = 'expanded';
+            // Expand all charts
+            Object.keys(this.expandedCharts).forEach(key => {
+                this.expandedCharts[key] = true;
+            });
+        }
+        else {
+            this.viewMode = 'grid';
+            // Collapse all charts
+            Object.keys(this.expandedCharts).forEach(key => {
+                this.expandedCharts[key] = false;
+            });
+        }
+        setTimeout(() => {
+            this.renderCharts();
+        }, 100);
+    }
+    getActionType(actionName) {
+        // Action type is not directly available on ActionExecutionLogEntity
+        return 'Action';
+    }
+    getTopErrors() {
+        return Array.from(this.actionMetrics.errorAnalysis.entries())
+            .map(([message, count]) => {
+            // Try to extract meaningful error message from potentially complex error strings
+            let cleanMessage = message;
+            // If it looks like a view execution result, extract the key part
+            if (message.includes('View executed successfully but returned no data')) {
+                cleanMessage = 'View executed successfully but returned no data';
+            }
+            else if (message.length > 200) {
+                // For very long error messages, truncate and add ellipsis
+                cleanMessage = message.substring(0, 200) + '...';
+            }
+            return { message: cleanMessage, count };
+        })
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 5); // Top 5 errors
+    }
+    getModelPerformanceData() {
+        const modelData = new Map();
+        for (const promptRun of this.allPromptRuns) {
+            const model = promptRun.Model || 'Unknown';
+            const vendor = promptRun.Vendor || 'Unknown';
+            const key = `${model}|${vendor}`;
+            if (!modelData.has(key)) {
+                modelData.set(key, {
+                    name: model,
+                    vendor: vendor,
+                    count: 0,
+                    totalTime: 0,
+                    avgTime: 0,
+                    totalCost: 0,
+                    avgCost: 0,
+                    inputTokens: 0,
+                    outputTokens: 0
+                });
+            }
+            const data = modelData.get(key);
+            data.count++;
+            const execTime = this.calculateExecutionTime(promptRun.RunAt, promptRun.CompletedAt);
+            data.totalTime += execTime;
+            data.avgTime = data.totalTime / data.count;
+            data.totalCost += promptRun.TotalCost || 0;
+            data.avgCost = data.totalCost / data.count;
+            data.inputTokens += promptRun.TokensPrompt || 0;
+            data.outputTokens += promptRun.TokensCompletion || 0;
+        }
+        return Array.from(modelData.values()).sort((a, b) => b.count - a.count);
+    }
+    getStepTypeIcon(stepType) {
+        const iconMap = {
+            'Prompts': 'fa-microchip',
+            'Actions': 'fa-cog',
+            'Sub-Agent': 'fa-robot',
+            'Start': 'fa-play-circle',
+            'End': 'fa-stop-circle',
+            'Decision': 'fa-code-branch',
+            'Loop': 'fa-sync',
+            'Error': 'fa-exclamation-triangle'
+        };
+        return iconMap[stepType] || 'fa-circle';
+    }
+    getModelColor(model) {
+        // Return a color from the same palette used in generateColors
+        const colors = [
+            'rgba(255, 99, 132, 0.5)',
+            'rgba(54, 162, 235, 0.5)',
+            'rgba(255, 206, 86, 0.5)',
+            'rgba(75, 192, 192, 0.5)',
+            'rgba(153, 102, 255, 0.5)',
+            'rgba(255, 159, 64, 0.5)',
+            'rgba(199, 199, 199, 0.5)',
+            'rgba(83, 102, 255, 0.5)',
+            'rgba(255, 99, 255, 0.5)',
+            'rgba(99, 255, 132, 0.5)'
+        ];
+        // Use a simple hash of the model name to consistently pick a color
+        let hash = 0;
+        for (let i = 0; i < model.length; i++) {
+            hash = model.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }
+    renderPromptTimeDistributionChart() {
+        const element = this.promptTimeDistributionChart.nativeElement;
+        const data = Array.from(this.promptMetrics.byPrompt.entries())
+            .map(([name, metrics]) => ({
+            name: name.length > 20 ? name.substring(0, 20) + '...' : name,
+            value: metrics.avgTime
+        }))
+            .sort((a, b) => b.value - a.value)
+            .slice(0, 10); // Top 10 prompts by avg time
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const margin = { top: 40, right: 20, bottom: 120, left: 80 };
+        const width = 320 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x = d3.scaleBand()
+            .range([0, width])
+            .domain(data.map(d => d.name))
+            .padding(0.1);
+        const y = d3.scaleLinear()
+            .domain([0, d3.max(data, d => d.value) || 0])
+            .range([height, 0]);
+        // Add bars
+        svg.selectAll('.bar')
+            .data(data)
+            .enter().append('rect')
+            .attr('class', 'bar')
+            .attr('x', d => x(d.name) || 0)
+            .attr('width', x.bandwidth())
+            .attr('y', d => y(d.value))
+            .attr('height', d => height - y(d.value))
+            .attr('fill', '#667eea');
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end')
+            .style('font-size', '10px');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y).tickFormat(d => `${d}ms`));
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Average Execution Time by Prompt');
+    }
+    renderPromptTokenDistributionChart() {
+        const element = this.promptTokenDistributionChart.nativeElement;
+        // Aggregate token data by prompt
+        const promptTokenData = new Map();
+        for (const run of this.allPromptRuns) {
+            const promptName = run.Prompt || 'Unknown';
+            const existing = promptTokenData.get(promptName) || { input: 0, output: 0 };
+            existing.input += run.TokensPrompt || 0;
+            existing.output += run.TokensCompletion || 0;
+            promptTokenData.set(promptName, existing);
+        }
+        const topPrompts = Array.from(promptTokenData.entries())
+            .sort((a, b) => (b[1].input + b[1].output) - (a[1].input + a[1].output))
+            .slice(0, 8)
+            .map(([name]) => name);
+        const inputData = topPrompts.map(prompt => ({
+            prompt: prompt.length > 15 ? prompt.substring(0, 15) + '...' : prompt,
+            type: 'Input',
+            value: promptTokenData.get(prompt)?.input || 0
+        }));
+        const outputData = topPrompts.map(prompt => ({
+            prompt: prompt.length > 15 ? prompt.substring(0, 15) + '...' : prompt,
+            type: 'Output',
+            value: promptTokenData.get(prompt)?.output || 0
+        }));
+        const data = [...inputData, ...outputData];
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const margin = { top: 40, right: 100, bottom: 100, left: 80 };
+        const width = 320 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x0 = d3.scaleBand()
+            .rangeRound([0, width])
+            .paddingInner(0.1)
+            .domain(topPrompts.map(p => p.length > 15 ? p.substring(0, 15) + '...' : p));
+        const x1 = d3.scaleBand()
+            .padding(0.05)
+            .domain(['Input', 'Output'])
+            .rangeRound([0, x0.bandwidth()]);
+        const y = d3.scaleLinear()
+            .rangeRound([height, 0])
+            .domain([0, d3.max(data, d => d.value) || 0]);
+        const color = d3.scaleOrdinal()
+            .domain(['Input', 'Output'])
+            .range(['#764ba2', '#667eea']);
+        const grouped = d3.group(data, d => d.prompt);
+        svg.append('g')
+            .selectAll('g')
+            .data(grouped)
+            .enter().append('g')
+            .attr('transform', d => `translate(${x0(d[0]) || 0},0)`)
+            .selectAll('rect')
+            .data(d => d[1])
+            .enter().append('rect')
+            .attr('x', d => x1(d.type) || 0)
+            .attr('y', d => y(d.value))
+            .attr('width', x1.bandwidth())
+            .attr('height', d => height - y(d.value))
+            .attr('fill', d => color(d.type));
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x0))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end')
+            .style('font-size', '10px');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y).tickFormat(d => d3.format('.2s')(d)));
+        // Add legend
+        const legend = svg.append('g')
+            .attr('font-family', 'sans-serif')
+            .attr('font-size', 10)
+            .attr('text-anchor', 'end')
+            .selectAll('g')
+            .data(['Input', 'Output'])
+            .enter().append('g')
+            .attr('transform', (d, i) => `translate(0,${i * 20})`);
+        legend.append('rect')
+            .attr('x', width + 70)
+            .attr('width', 19)
+            .attr('height', 19)
+            .attr('fill', d => color(d));
+        legend.append('text')
+            .attr('x', width + 65)
+            .attr('y', 9.5)
+            .attr('dy', '0.32em')
+            .text(d => d);
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Token Usage by Prompt');
+    }
+    renderPromptCostDistributionChart() {
+        const element = this.promptCostDistributionChart.nativeElement;
+        // Aggregate cost data by prompt
+        const promptCostData = new Map();
+        for (const run of this.allPromptRuns) {
+            const promptName = run.Prompt || 'Unknown';
+            const existing = promptCostData.get(promptName) || 0;
+            promptCostData.set(promptName, existing + (run.TotalCost || 0));
+        }
+        const data = Array.from(promptCostData.entries())
+            .filter(([_, cost]) => cost > 0)
+            .map(([name, cost]) => ({
+            name: name.length > 20 ? name.substring(0, 20) + '...' : name,
+            value: cost
+        }))
+            .sort((a, b) => b.value - a.value)
+            .slice(0, 10); // Top 10 prompts by cost
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const width = 300;
+        const height = 220;
+        const radius = Math.min(width, height) / 2 - 40;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .append('g')
+            .attr('transform', `translate(${width / 2}, ${height / 2})`);
+        const color = d3.scaleOrdinal(d3.schemePurples[9].slice(2));
+        const pie = d3.pie()
+            .value(d => d.value)
+            .sort((a, b) => b.value - a.value);
+        const arc = d3.arc()
+            .innerRadius(radius * 0.5)
+            .outerRadius(radius);
+        const arcs = svg.selectAll('arc')
+            .data(pie(data))
+            .enter()
+            .append('g');
+        arcs.append('path')
+            .attr('d', arc)
+            .attr('fill', (d, i) => color(i.toString()))
+            .attr('stroke', 'white')
+            .style('stroke-width', '2px');
+        // Add title
+        svg.append('text')
+            .attr('x', 0)
+            .attr('y', -radius - 25)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Cost Distribution by Prompt');
+        // Add total cost in center
+        svg.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('dy', '-0.5em')
+            .style('font-size', '14px')
+            .style('font-weight', 'bold')
+            .text('Total Cost');
+        svg.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('dy', '1em')
+            .style('font-size', '18px')
+            .style('font-weight', 'bold')
+            .text(this.formatCost(data.reduce((sum, d) => sum + d.value, 0)));
+    }
+    renderPromptCountByNameChart() {
+        const element = this.promptCountByNameChart.nativeElement;
+        const data = Array.from(this.promptMetrics.byPrompt.entries())
+            .map(([name, metrics]) => ({
+            name: name.length > 20 ? name.substring(0, 20) + '...' : name,
+            value: metrics.count
+        }))
+            .sort((a, b) => b.value - a.value)
+            .slice(0, 10); // Top 10 prompts by count
+        if (data.length === 0)
+            return;
+        // Clear previous chart
+        d3.select(element).selectAll('*').remove();
+        const margin = { top: 40, right: 20, bottom: 120, left: 60 };
+        const width = 320 - margin.left - margin.right;
+        const height = 200 - margin.top - margin.bottom;
+        const svg = d3.select(element)
+            .append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const x = d3.scaleBand()
+            .range([0, width])
+            .domain(data.map(d => d.name))
+            .padding(0.1);
+        const y = d3.scaleLinear()
+            .domain([0, d3.max(data, d => d.value) || 0])
+            .range([height, 0]);
+        // Create gradient
+        const gradient = svg.append('defs')
+            .append('linearGradient')
+            .attr('id', 'promptCountGradient')
+            .attr('x1', '0%')
+            .attr('y1', '0%')
+            .attr('x2', '0%')
+            .attr('y2', '100%');
+        gradient.append('stop')
+            .attr('offset', '0%')
+            .attr('stop-color', '#667eea')
+            .attr('stop-opacity', 1);
+        gradient.append('stop')
+            .attr('offset', '100%')
+            .attr('stop-color', '#764ba2')
+            .attr('stop-opacity', 1);
+        // Add bars
+        svg.selectAll('.bar')
+            .data(data)
+            .enter().append('rect')
+            .attr('class', 'bar')
+            .attr('x', d => x(d.name) || 0)
+            .attr('width', x.bandwidth())
+            .attr('y', d => y(d.value))
+            .attr('height', d => height - y(d.value))
+            .attr('fill', 'url(#promptCountGradient)');
+        // Add value labels on bars
+        svg.selectAll('.bar-label')
+            .data(data)
+            .enter().append('text')
+            .attr('class', 'bar-label')
+            .attr('x', d => (x(d.name) || 0) + x.bandwidth() / 2)
+            .attr('y', d => y(d.value) - 5)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
+            .style('font-weight', 'bold')
+            .text(d => d.value);
+        // Add x axis
+        svg.append('g')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x))
+            .selectAll('text')
+            .attr('transform', 'rotate(-45)')
+            .style('text-anchor', 'end')
+            .style('font-size', '10px');
+        // Add y axis
+        svg.append('g')
+            .call(d3.axisLeft(y));
+        // Add title
+        svg.append('text')
+            .attr('x', width / 2)
+            .attr('y', -20)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '16px')
+            .style('font-weight', 'bold')
+            .text('Prompt Execution Count');
+    }
+    static { this.ɵfac = function AIAgentRunAnalyticsComponent_Factory(t) { return new (t || AIAgentRunAnalyticsComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunAnalyticsComponent, selectors: [["mj-ai-agent-run-analytics"]], viewQuery: function AIAgentRunAnalyticsComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+            i0.ɵɵviewQuery(_c2, 5);
+            i0.ɵɵviewQuery(_c3, 5);
+            i0.ɵɵviewQuery(_c4, 5);
+            i0.ɵɵviewQuery(_c5, 5);
+            i0.ɵɵviewQuery(_c6, 5);
+            i0.ɵɵviewQuery(_c7, 5);
+            i0.ɵɵviewQuery(_c8, 5);
+            i0.ɵɵviewQuery(_c9, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modelDistributionChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.executionTimeChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.costByVendorChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tokenUsageChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionSuccessRateChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stepTypeChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptTimeDistributionChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptTokenDistributionChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCostDistributionChart = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCountByNameChart = _t.first);
+        } }, inputs: { agentRunId: "agentRunId" }, decls: 4, vars: 3, consts: [["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], ["actionSuccessRateChart", ""], ["stepTypeChart", ""], [1, "analytics-container"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], ["class", "analytics-content", 4, "ngIf"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["kendoButton", "", 3, "click"], [1, "analytics-content"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [1, "fas", "fa-tachometer-alt"], [1, "summary-cards"], [1, "summary-card"], [1, "card-icon", "prompts"], [1, "fas", "fa-microchip"], [1, "card-content"], [1, "metric-value"], [1, "metric-detail"], [1, "success"], ["class", "failed", 4, "ngIf"], [1, "card-icon", "actions"], [1, "fas", "fa-cog"], [1, "card-icon", "cost"], [1, "fas", "fa-dollar-sign"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "failed"], [1, "analytics-panel"], ["class", "view-mode-toggle", 4, "ngIf"], ["class", "no-data-message", 4, "ngIf"], ["class", "charts-grid", 4, "ngIf"], ["class", "charts-grid", "style", "margin-top: 20px;", 4, "ngIf"], [1, "detailed-metrics"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "fas", 3, "ngClass"], ["class", "metrics-table", 4, "ngIf"], [1, "view-mode-toggle"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "no-data-message"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "charts-grid"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-pie"], [1, "expand-btn"], [1, "chart-card-body"], [1, "chart-container"], ["id", "modelDistributionChart"], ["class", "chart-legend", 4, "ngIf"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "chart-legend"], ["class", "legend-item", 4, "ngFor", "ngForOf"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "metrics-table"], [4, "ngFor", "ngForOf"], [1, "success-rate"], [1, "fas", "fa-chart-bar"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], ["class", "error-analysis", 4, "ngIf"], ["class", "no-errors", 4, "ngIf"], [1, "error-analysis"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], ["class", "error-item", 4, "ngFor", "ngForOf"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "no-errors"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "model-comparison"], [1, "fas", "fa-stream"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], ["class", "step-type-item", 4, "ngFor", "ngForOf"], [1, "step-type-item"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 10);
+            i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_1_Template, 4, 0, "div", 11)(2, AIAgentRunAnalyticsComponent_div_2_Template, 6, 1, "div", 12)(3, AIAgentRunAnalyticsComponent_div_3_Template, 17, 5, "div", 13);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.error && !ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && !ctx.error);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.PanelBarComponent, i2.PanelBarItemComponent, i2.PanelBarContentDirective, i2.PanelBarItemTitleDirective, i3.ButtonComponent, i1.DecimalPipe, i1.KeyValuePipe], styles: [".analytics-container[_ngcontent-%COMP%] {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.summary-cards[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .success[_ngcontent-%COMP%] {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   .failed[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.analytics-panel[_ngcontent-%COMP%] {\n  padding: 15px;\n}\n\n\n\n  .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n  .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n  .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n  .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n\n\n.charts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n\n\n.chart-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header[_ngcontent-%COMP%]:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  color: #495057;\n}\n\n.chart-card-body[_ngcontent-%COMP%] {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-card-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n.chart-card.expanded[_ngcontent-%COMP%]   .chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 400px;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.chart-container[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\n\n.chart-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color[_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total[_ngcontent-%COMP%] {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n\n\n.detailed-metrics[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n\n.metrics-table[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.metrics-table[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.success-rate.high[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.success-rate.medium[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.success-rate.low[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.error-analysis[_ngcontent-%COMP%] {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count[_ngcontent-%COMP%] {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #495057;\n}\n\n\n\n.no-errors[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.no-data-message[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message[_ngcontent-%COMP%]   p.small[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n\n\n.model-comparison[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.model-comparison[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: #f8f9fa;\n}\n\n\n\n.timeline-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n  .summary-cards[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunAnalyticsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-ai-agent-run-analytics', template: "<div class=\"analytics-container\">\n  <!-- Loading State -->\n  <div class=\"loading-state\" *ngIf=\"isLoading\">\n    <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n    <p>Loading analytics data...</p>\n  </div>\n\n  <!-- Error State -->\n  <div class=\"error-state\" *ngIf=\"error && !isLoading\">\n    <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n    <p>{{ error }}</p>\n    <button kendoButton (click)=\"loadData()\">Retry</button>\n  </div>\n\n  <!-- Analytics Content -->\n  <div class=\"analytics-content\" *ngIf=\"!isLoading && !error\">\n    <kendo-panelbar>\n      <!-- Summary Cards -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-tachometer-alt\"></i> Overview\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"summary-cards\">\n      <div class=\"summary-card\">\n        <div class=\"card-icon prompts\">\n          <i class=\"fas fa-microchip\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Prompts</h3>\n          <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"promptMetrics.statusBreakdown.failed > 0\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon actions\">\n          <i class=\"fas fa-cog\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Actions</h3>\n          <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n          <div class=\"metric-detail\">\n            <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n            <span class=\"failed\" *ngIf=\"actionMetrics.statusBreakdown.failed > 0\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon cost\">\n          <i class=\"fas fa-dollar-sign\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Total Cost</h3>\n          <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"summary-card\">\n        <div class=\"card-icon time\">\n          <i class=\"fas fa-clock\"></i>\n        </div>\n        <div class=\"card-content\">\n          <h3>Execution Time</h3>\n          <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n          <div class=\"metric-detail\">\n            <span>{{ timelineMetrics.totalSteps }} total steps</span>\n          </div>\n        </div>\n      </div>\n    </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Prompt Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-microchip\"></i> Prompt Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n        <!-- View Mode Toggle -->\n        <div class=\"view-mode-toggle\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  size=\"small\"\n                  (click)=\"toggleViewMode()\">\n            <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n            {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n          </button>\n        </div>\n        \n        <!-- No prompts message -->\n        <div class=\"no-data-message\" *ngIf=\"promptMetrics.totalCount === 0\">\n          <i class=\"fas fa-info-circle\"></i>\n          <p>No prompt executions found in this agent run.</p>\n          <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n        </div>\n\n        <div class=\"charts-grid\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Model Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n                <div class=\"chart-legend\" *ngIf=\"promptMetrics.byModel.size > 0\">\n                  <div class=\"legend-item\" *ngFor=\"let item of promptMetrics.byModel | keyvalue\">\n                    <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n                    <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Execution Time by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n              <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"executionTimeChart\" #executionTimeChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Cost by Vendor -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n              <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"costByVendorChart\" #costByVendorChart></div>\n                <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n              <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Additional Prompt Analytics Charts -->\n        <div class=\"charts-grid\" style=\"margin-top: 20px;\" *ngIf=\"promptMetrics.totalCount > 0\">\n          <!-- Prompt Execution Time Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n              <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Token Usage -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n              <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Cost Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n              <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Prompt Count by Name -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n              <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Prompt Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Prompt Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"promptDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Prompt Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Total Time</th>\n                  <th>Success Rate</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let prompt of promptMetrics.byPrompt | keyvalue\">\n                  <td>{{ prompt.key }}</td>\n                  <td>{{ prompt.value.count }}</td>\n                  <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n                  <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\">\n                      <!-- Calculate success rate for this prompt -->\n                      {{ calculatePromptSuccessRate(prompt.key) }}%\n                    </span>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Action Analytics -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-cog\"></i> Action Analytics\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"charts-grid\">\n          <!-- Action Success Rate -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n              <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Step Type Distribution -->\n          <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n            <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n              <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n              <button class=\"expand-btn\">\n                <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n              </button>\n            </div>\n            <div class=\"chart-card-body\">\n              <div class=\"chart-container\">\n                <div id=\"stepTypeChart\" #stepTypeChart></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Detailed Action Metrics -->\n        <div class=\"detailed-metrics\">\n          <button kendoButton \n                  fillMode=\"flat\" \n                  (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n            <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n            Detailed Action Metrics\n          </button>\n          \n          <div class=\"metrics-table\" *ngIf=\"actionDetailsExpanded\">\n            <table>\n              <thead>\n                <tr>\n                  <th>Action Name</th>\n                  <th>Count</th>\n                  <th>Avg Time</th>\n                  <th>Success Rate</th>\n                  <th>Type</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr *ngFor=\"let action of actionMetrics.byAction | keyvalue\">\n                  <td>{{ action.key }}</td>\n                  <td>{{ action.value.count }}</td>\n                  <td>{{ formatDuration(action.value.avgTime) }}</td>\n                  <td>\n                    <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\" \n                                                [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n                                                [class.low]=\"action.value.successRate <= 0.7\">\n                      {{ (action.value.successRate * 100).toFixed(1) }}%\n                    </span>\n                  </td>\n                  <td>{{ getActionType(action.key) }}</td>\n                </tr>\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        <!-- Error Analysis -->\n        <div class=\"error-analysis-section\">\n          <div class=\"error-analysis\" *ngIf=\"actionMetrics.errorAnalysis.size > 0\">\n          <h3>\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Common Errors\n          </h3>\n          <p class=\"error-analysis-description\">\n            This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n          </p>\n          <div class=\"error-list\">\n            <div class=\"error-item\" *ngFor=\"let error of getTopErrors()\">\n              <span class=\"error-count\">{{ error.count }}x</span>\n              <span class=\"error-message\">{{ error.message }}</span>\n            </div>\n          </div>\n        </div>\n          <div class=\"no-errors\" *ngIf=\"actionMetrics.errorAnalysis.size === 0\">\n            <i class=\"fas fa-check-circle\"></i>\n            <p>No action errors detected in this run. All actions completed successfully!</p>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Model Performance Comparison -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"model-comparison\">\n          <table>\n            <thead>\n              <tr>\n                <th>Model</th>\n                <th>Vendor</th>\n                <th>Prompts</th>\n                <th>Avg Time</th>\n                <th>Total Cost</th>\n                <th>Avg Cost/Prompt</th>\n                <th>Input Tokens</th>\n                <th>Output Tokens</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let model of getModelPerformanceData()\">\n                <td>{{ model.name }}</td>\n                <td>{{ model.vendor }}</td>\n                <td>{{ model.count }}</td>\n                <td>{{ formatDuration(model.avgTime) }}</td>\n                <td>{{ formatCost(model.totalCost) }}</td>\n                <td>{{ formatCost(model.avgCost) }}</td>\n                <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n                <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n\n      <!-- Timeline Analysis -->\n      <kendo-panelbar-item [expanded]=\"true\">\n        <ng-template kendoPanelBarItemTitle>\n          <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n        </ng-template>\n        <ng-template kendoPanelBarContent>\n      <div class=\"analytics-panel\">\n\n        <div class=\"timeline-stats\">\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Total Steps</span>\n            <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Parallel Executions</span>\n            <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Max Nesting Depth</span>\n            <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n          </div>\n          <div class=\"stat-item\">\n            <span class=\"stat-label\">Sub-Agent Runs</span>\n            <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n          </div>\n        </div>\n\n        <div class=\"step-breakdown\">\n          <h3>Steps by Type</h3>\n          <div class=\"step-type-list\">\n            <div class=\"step-type-item\" *ngFor=\"let type of timelineMetrics.stepsByType | keyvalue\">\n              <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n              <span class=\"type-name\">{{ type.key }}</span>\n              <span class=\"type-count\">{{ type.value }}</span>\n              <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n            </div>\n          </div>\n        </div>\n      </div>\n        </ng-template>\n      </kendo-panelbar-item>\n    </kendo-panelbar>\n  </div>\n</div>", styles: [".analytics-container {\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n  background-color: #f8f9fa;\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: #6c757d;\n}\n\n.loading-state i,\n.error-state i {\n  margin-bottom: 15px;\n}\n\n.error-state {\n  color: #dc3545;\n}\n\n/* Summary Cards */\n.summary-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.summary-card {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  display: flex;\n  align-items: center;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 20px;\n  font-size: 24px;\n  color: white;\n}\n\n.card-icon.prompts {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions {\n  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost {\n  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time {\n  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.metric-value {\n  font-size: 28px;\n  font-weight: 700;\n  color: #212529;\n  margin-bottom: 4px;\n}\n\n.metric-detail {\n  font-size: 13px;\n  color: #6c757d;\n}\n\n.metric-detail .success {\n  color: #28a745;\n  margin-right: 10px;\n}\n\n.metric-detail .failed {\n  color: #dc3545;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n  padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n  border: none;\n  background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n  border: none;\n  border-radius: 12px;\n  margin-bottom: 12px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n  background: white;\n  overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n  background: white;\n  border: none;\n  padding: 16px 20px;\n  border-radius: 12px 12px 0 0;\n  color: #2c3e50;\n  font-weight: 600;\n  font-size: 16px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n  background: #f8f9fa;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n  background: #2196f3;\n  color: white;\n  border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n  position: absolute;\n  right: 24px;\n  color: inherit;\n  font-size: 14px;\n  transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n  transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n  content: '\\f107';\n  font-family: 'Font Awesome 6 Free';\n  font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n  padding: 0;\n  border: none;\n  background: white;\n  border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n  font-size: 18px;\n  color: #2196f3;\n  margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n  color: white;\n}\n\n/* Charts */\n.charts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n  grid-column: 1 / -1;\n}\n\n.chart-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: #f8f9fa;\n  border-bottom: 1px solid #e9ecef;\n  cursor: pointer;\n  user-select: none;\n}\n\n.chart-card-header:hover {\n  background-color: #e9ecef;\n}\n\n.chart-card-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.chart-card-header h3 i {\n  font-size: 16px;\n  color: #6c757d;\n}\n\n.expand-btn {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: #6c757d;\n  transition: color 0.2s;\n}\n\n.expand-btn:hover {\n  color: #495057;\n}\n\n.chart-card-body {\n  padding: 16px;\n  background: white;\n}\n\n.chart-card.expanded .chart-card-body {\n  padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n  min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.chart-container {\n  position: relative;\n}\n\n.chart-container h3 {\n  margin: 0 0 10px 0;\n  font-size: 15px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.chart-container > div {\n  min-height: 220px;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n  display: block;\n  margin: 0 auto;\n}\n\n.chart-legend {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 3px;\n}\n\n.chart-total {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n  margin-top: 20px;\n  border-top: 1px solid #e9ecef;\n  padding-top: 20px;\n}\n\n.detailed-metrics button {\n  margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n  margin-right: 8px;\n}\n\n.metrics-table {\n  overflow-x: auto;\n}\n\n.metrics-table table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.metrics-table th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table tr:hover {\n  background-color: #f8f9fa;\n}\n\n.success-rate {\n  font-weight: 500;\n}\n\n.success-rate.high {\n  color: #28a745;\n}\n\n.success-rate.medium {\n  color: #ffc107;\n}\n\n.success-rate.low {\n  color: #dc3545;\n}\n\n/* Error Analysis */\n.error-analysis {\n  margin-top: 30px;\n  padding: 20px;\n  background-color: #fff5f5;\n  border-radius: 8px;\n  border: 1px solid #f5c6cb;\n}\n\n.error-analysis h3 {\n  margin: 0 0 15px 0;\n  color: #721c24;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.error-analysis-description {\n  font-size: 14px;\n  color: #856404;\n  margin-bottom: 20px;\n  line-height: 1.5;\n}\n\n.error-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.error-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px;\n  background-color: white;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.error-count {\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.error-message {\n  flex: 1;\n  color: #495057;\n}\n\n/* No errors state */\n.no-errors {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  background-color: #d4edda;\n  border-radius: 8px;\n  border: 1px solid #c3e6cb;\n  color: #155724;\n}\n\n.no-errors i {\n  font-size: 24px;\n  color: #28a745;\n}\n\n.no-errors p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n  text-align: center;\n  padding: 60px 20px;\n  color: #6c757d;\n}\n\n.no-data-message i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  color: #dee2e6;\n}\n\n.no-data-message p {\n  margin: 0 0 10px 0;\n  font-size: 16px;\n}\n\n.no-data-message p.small {\n  font-size: 14px;\n  color: #adb5bd;\n}\n\n/* Model Comparison Table */\n.model-comparison {\n  overflow-x: auto;\n}\n\n.model-comparison table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.model-comparison th {\n  background-color: #f8f9fa;\n  padding: 12px;\n  text-align: left;\n  font-weight: 600;\n  color: #495057;\n  border-bottom: 2px solid #dee2e6;\n  white-space: nowrap;\n}\n\n.model-comparison td {\n  padding: 12px;\n  border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison tr:hover {\n  background-color: #f8f9fa;\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n  margin-bottom: 30px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 20px;\n  background-color: #f8f9fa;\n  border-radius: 8px;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: #6c757d;\n  margin-bottom: 8px;\n}\n\n.stat-value {\n  font-size: 32px;\n  font-weight: 700;\n  color: #212529;\n}\n\n.step-breakdown h3 {\n  margin: 0 0 15px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.step-type-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 12px;\n}\n\n.step-type-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border: 1px solid #e9ecef;\n}\n\n.step-type-item i {\n  width: 30px;\n  text-align: center;\n  color: #6c757d;\n}\n\n.type-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.type-count {\n  font-weight: 700;\n  color: #212529;\n}\n\n.type-percentage {\n  font-size: 13px;\n  color: #6c757d;\n  margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .summary-cards {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .timeline-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { agentRunId: [{
+            type: Input
+        }], modelDistributionChart: [{
+            type: ViewChild,
+            args: ['modelDistributionChart', { static: false }]
+        }], executionTimeChart: [{
+            type: ViewChild,
+            args: ['executionTimeChart', { static: false }]
+        }], costByVendorChart: [{
+            type: ViewChild,
+            args: ['costByVendorChart', { static: false }]
+        }], tokenUsageChart: [{
+            type: ViewChild,
+            args: ['tokenUsageChart', { static: false }]
+        }], actionSuccessRateChart: [{
+            type: ViewChild,
+            args: ['actionSuccessRateChart', { static: false }]
+        }], stepTypeChart: [{
+            type: ViewChild,
+            args: ['stepTypeChart', { static: false }]
+        }], promptTimeDistributionChart: [{
+            type: ViewChild,
+            args: ['promptTimeDistributionChart', { static: false }]
+        }], promptTokenDistributionChart: [{
+            type: ViewChild,
+            args: ['promptTokenDistributionChart', { static: false }]
+        }], promptCostDistributionChart: [{
+            type: ViewChild,
+            args: ['promptCostDistributionChart', { static: false }]
+        }], promptCountByNameChart: [{
+            type: ViewChild,
+            args: ['promptCountByNameChart', { static: false }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunAnalyticsComponent, { className: "AIAgentRunAnalyticsComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-analytics.component.ts", lineNumber: 43 }); })();
+//# sourceMappingURL=ai-agent-run-analytics.component.js.map