@memberjunction/ng-core-entity-forms 2.75.0 → 2.77.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/README.md +124 -0
  2. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.d.ts +109 -0
  3. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.d.ts.map +1 -0
  4. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.js +2020 -0
  5. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.js.map +1 -0
  6. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.d.ts +32 -0
  7. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.d.ts.map +1 -0
  8. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js +413 -0
  9. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js.map +1 -0
  10. package/dist/lib/custom/AIAgents/FlowAgentType/step-info-control.component.d.ts +9 -0
  11. package/dist/lib/custom/AIAgents/FlowAgentType/step-info-control.component.d.ts.map +1 -0
  12. package/dist/lib/custom/AIAgents/FlowAgentType/step-info-control.component.js +84 -0
  13. package/dist/lib/custom/AIAgents/FlowAgentType/step-info-control.component.js.map +1 -0
  14. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +34 -6
  15. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  16. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +656 -520
  17. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  18. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +223 -221
  19. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  20. package/dist/lib/custom/Actions/action-execution-log-form.component.js +51 -49
  21. package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
  22. package/dist/lib/custom/Actions/action-test-harness.component.d.ts.map +1 -1
  23. package/dist/lib/custom/Actions/action-test-harness.component.js +5 -3
  24. package/dist/lib/custom/Actions/action-test-harness.component.js.map +1 -1
  25. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +160 -158
  26. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js.map +1 -1
  27. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.d.ts.map +1 -1
  28. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.js +3 -6
  29. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.js.map +1 -1
  30. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.d.ts +49 -0
  31. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.d.ts.map +1 -0
  32. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.js +211 -0
  33. package/dist/lib/custom/ai-agent-run/ai-agent-run-data.service.js.map +1 -0
  34. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.d.ts +33 -0
  35. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.d.ts.map +1 -0
  36. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +265 -0
  37. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js.map +1 -0
  38. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts +4 -8
  39. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts.map +1 -1
  40. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +47 -163
  41. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map +1 -1
  42. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts +71 -0
  43. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map +1 -0
  44. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js +931 -0
  45. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js.map +1 -0
  46. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts +6 -4
  47. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts.map +1 -1
  48. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +202 -297
  49. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -1
  50. package/dist/lib/custom/custom-forms.module.d.ts +30 -25
  51. package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
  52. package/dist/lib/custom/custom-forms.module.js +31 -4
  53. package/dist/lib/custom/custom-forms.module.js.map +1 -1
  54. package/dist/lib/generated/Entities/AIAgent/aiagent.form.component.js +34 -14
  55. package/dist/lib/generated/Entities/AIAgent/aiagent.form.component.js.map +1 -1
  56. package/dist/lib/generated/Entities/AIAgentStep/aiagentstep.form.component.d.ts +10 -0
  57. package/dist/lib/generated/Entities/AIAgentStep/aiagentstep.form.component.d.ts.map +1 -0
  58. package/dist/lib/generated/Entities/AIAgentStep/aiagentstep.form.component.js +80 -0
  59. package/dist/lib/generated/Entities/AIAgentStep/aiagentstep.form.component.js.map +1 -0
  60. package/dist/lib/generated/Entities/AIAgentStep/sections/details.component.d.ts +11 -0
  61. package/dist/lib/generated/Entities/AIAgentStep/sections/details.component.d.ts.map +1 -0
  62. package/dist/lib/generated/Entities/AIAgentStep/sections/details.component.js +277 -0
  63. package/dist/lib/generated/Entities/AIAgentStep/sections/details.component.js.map +1 -0
  64. package/dist/lib/generated/Entities/AIAgentStepPath/aiagentsteppath.form.component.d.ts +10 -0
  65. package/dist/lib/generated/Entities/AIAgentStepPath/aiagentsteppath.form.component.d.ts.map +1 -0
  66. package/dist/lib/generated/Entities/AIAgentStepPath/aiagentsteppath.form.component.js +59 -0
  67. package/dist/lib/generated/Entities/AIAgentStepPath/aiagentsteppath.form.component.js.map +1 -0
  68. package/dist/lib/generated/Entities/AIAgentStepPath/sections/details.component.d.ts +11 -0
  69. package/dist/lib/generated/Entities/AIAgentStepPath/sections/details.component.d.ts.map +1 -0
  70. package/dist/lib/generated/Entities/AIAgentStepPath/sections/details.component.js +147 -0
  71. package/dist/lib/generated/Entities/AIAgentStepPath/sections/details.component.js.map +1 -0
  72. package/dist/lib/generated/Entities/AIAgentType/sections/details.component.d.ts.map +1 -1
  73. package/dist/lib/generated/Entities/AIAgentType/sections/details.component.js +31 -4
  74. package/dist/lib/generated/Entities/AIAgentType/sections/details.component.js.map +1 -1
  75. package/dist/lib/generated/Entities/AIPrompt/aiprompt.form.component.js +16 -6
  76. package/dist/lib/generated/Entities/AIPrompt/aiprompt.form.component.js.map +1 -1
  77. package/dist/lib/generated/Entities/Action/action.form.component.js +19 -9
  78. package/dist/lib/generated/Entities/Action/action.form.component.js.map +1 -1
  79. package/dist/lib/generated/generated-forms.module.d.ts +294 -285
  80. package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
  81. package/dist/lib/generated/generated-forms.module.js +183 -110
  82. package/dist/lib/generated/generated-forms.module.js.map +1 -1
  83. package/dist/public-api.d.ts +2 -0
  84. package/dist/public-api.d.ts.map +1 -1
  85. package/dist/public-api.js +3 -0
  86. package/dist/public-api.js.map +1 -1
  87. package/package.json +21 -17
package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js CHANGED
@@ -41,11 +41,11 @@ function AIAgentRunAnalyticsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
41
41
  i0.ɵɵtextInterpolate(ctx_r1.error);
42
42
  } }
43
43
  function AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
44
- i0.ɵɵelement(0, "i", 23);
44
+ i0.ɵɵelement(0, "i", 24);
45
45
  i0.ɵɵtext(1, " Overview ");
46
46
  } }
47
47
  function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template(rf, ctx) { if (rf & 1) {
48
- i0.ɵɵelementStart(0, "span", 39);
48
+ i0.ɵɵelementStart(0, "span", 40);
49
49
  i0.ɵɵtext(1);
50
50
  i0.ɵɵelementEnd();
51
51
  } if (rf & 2) {
@@ -54,7 +54,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template(rf, c
54
54
  i0.ɵɵtextInterpolate1("", ctx_r1.promptMetrics.statusBreakdown.failed, " failed");
55
55
  } }
56
56
  function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template(rf, ctx) { if (rf & 1) {
57
- i0.ɵɵelementStart(0, "span", 39);
57
+ i0.ɵɵelementStart(0, "span", 40);
58
58
  i0.ɵɵtext(1);
59
59
  i0.ɵɵelementEnd();
60
60
  } if (rf & 2) {
@@ -63,56 +63,56 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template(rf, c
63
63
  i0.ɵɵtextInterpolate1("", ctx_r1.actionMetrics.statusBreakdown.failed, " failed");
64
64
  } }
65
65
  function AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template(rf, ctx) { if (rf & 1) {
66
- i0.ɵɵelementStart(0, "div", 24)(1, "div", 25)(2, "div", 26);
67
- i0.ɵɵelement(3, "i", 27);
66
+ i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "div", 27);
67
+ i0.ɵɵelement(3, "i", 28);
68
68
  i0.ɵɵelementEnd();
69
- i0.ɵɵelementStart(4, "div", 28)(5, "h3");
69
+ i0.ɵɵelementStart(4, "div", 29)(5, "h3");
70
70
  i0.ɵɵtext(6, "Total Prompts");
71
71
  i0.ɵɵelementEnd();
72
- i0.ɵɵelementStart(7, "div", 29);
72
+ i0.ɵɵelementStart(7, "div", 30);
73
73
  i0.ɵɵtext(8);
74
74
  i0.ɵɵelementEnd();
75
- i0.ɵɵelementStart(9, "div", 30)(10, "span", 31);
75
+ i0.ɵɵelementStart(9, "div", 31)(10, "span", 32);
76
76
  i0.ɵɵtext(11);
77
77
  i0.ɵɵelementEnd();
78
- i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template, 2, 1, "span", 32);
78
+ i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_12_Template, 2, 1, "span", 33);
79
79
  i0.ɵɵelementEnd()()();
80
- i0.ɵɵelementStart(13, "div", 25)(14, "div", 33);
81
- i0.ɵɵelement(15, "i", 34);
80
+ i0.ɵɵelementStart(13, "div", 26)(14, "div", 34);
81
+ i0.ɵɵelement(15, "i", 35);
82
82
  i0.ɵɵelementEnd();
83
- i0.ɵɵelementStart(16, "div", 28)(17, "h3");
83
+ i0.ɵɵelementStart(16, "div", 29)(17, "h3");
84
84
  i0.ɵɵtext(18, "Total Actions");
85
85
  i0.ɵɵelementEnd();
86
- i0.ɵɵelementStart(19, "div", 29);
86
+ i0.ɵɵelementStart(19, "div", 30);
87
87
  i0.ɵɵtext(20);
88
88
  i0.ɵɵelementEnd();
89
- i0.ɵɵelementStart(21, "div", 30)(22, "span", 31);
89
+ i0.ɵɵelementStart(21, "div", 31)(22, "span", 32);
90
90
  i0.ɵɵtext(23);
91
91
  i0.ɵɵelementEnd();
92
- i0.ɵɵtemplate(24, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template, 2, 1, "span", 32);
92
+ i0.ɵɵtemplate(24, AIAgentRunAnalyticsComponent_div_3_ng_template_4_span_24_Template, 2, 1, "span", 33);
93
93
  i0.ɵɵelementEnd()()();
94
- i0.ɵɵelementStart(25, "div", 25)(26, "div", 35);
95
- i0.ɵɵelement(27, "i", 36);
94
+ i0.ɵɵelementStart(25, "div", 26)(26, "div", 36);
95
+ i0.ɵɵelement(27, "i", 37);
96
96
  i0.ɵɵelementEnd();
97
- i0.ɵɵelementStart(28, "div", 28)(29, "h3");
97
+ i0.ɵɵelementStart(28, "div", 29)(29, "h3");
98
98
  i0.ɵɵtext(30, "Total Cost");
99
99
  i0.ɵɵelementEnd();
100
- i0.ɵɵelementStart(31, "div", 29);
100
+ i0.ɵɵelementStart(31, "div", 30);
101
101
  i0.ɵɵtext(32);
102
102
  i0.ɵɵelementEnd();
103
- i0.ɵɵelementStart(33, "div", 30)(34, "span");
103
+ i0.ɵɵelementStart(33, "div", 31)(34, "span");
104
104
  i0.ɵɵtext(35);
105
105
  i0.ɵɵelementEnd()()()();
106
- i0.ɵɵelementStart(36, "div", 25)(37, "div", 37);
107
- i0.ɵɵelement(38, "i", 38);
106
+ i0.ɵɵelementStart(36, "div", 26)(37, "div", 38);
107
+ i0.ɵɵelement(38, "i", 39);
108
108
  i0.ɵɵelementEnd();
109
- i0.ɵɵelementStart(39, "div", 28)(40, "h3");
109
+ i0.ɵɵelementStart(39, "div", 29)(40, "h3");
110
110
  i0.ɵɵtext(41, "Execution Time");
111
111
  i0.ɵɵelementEnd();
112
- i0.ɵɵelementStart(42, "div", 29);
112
+ i0.ɵɵelementStart(42, "div", 30);
113
113
  i0.ɵɵtext(43);
114
114
  i0.ɵɵelementEnd();
115
- i0.ɵɵelementStart(44, "div", 30)(45, "span");
115
+ i0.ɵɵelementStart(44, "div", 31)(45, "span");
116
116
  i0.ɵɵtext(46);
117
117
  i0.ɵɵelementEnd()()()()();
118
118
  } if (rf & 2) {
@@ -139,14 +139,14 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template(rf, ctx) { if
139
139
  i0.ɵɵtextInterpolate1("", ctx_r1.timelineMetrics.totalSteps, " total steps");
140
140
  } }
141
141
  function AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template(rf, ctx) { if (rf & 1) {
142
- i0.ɵɵelement(0, "i", 27);
142
+ i0.ɵɵelement(0, "i", 28);
143
143
  i0.ɵɵtext(1, " Prompt Analytics ");
144
144
  } }
145
145
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template(rf, ctx) { if (rf & 1) {
146
146
  const _r4 = i0.ɵɵgetCurrentView();
147
- i0.ɵɵelementStart(0, "div", 49)(1, "button", 50);
147
+ i0.ɵɵelementStart(0, "div", 50)(1, "button", 51);
148
148
  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()); });
149
- i0.ɵɵelement(2, "i", 47);
149
+ i0.ɵɵelement(2, "i", 48);
150
150
  i0.ɵɵtext(3);
151
151
  i0.ɵɵelementEnd()();
152
152
  } if (rf & 2) {
@@ -157,19 +157,19 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template(rf, ctx
157
157
  i0.ɵɵtextInterpolate1(" ", ctx_r1.viewMode === "grid" ? "Expand All" : "Collapse All", " ");
158
158
  } }
159
159
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template(rf, ctx) { if (rf & 1) {
160
- i0.ɵɵelementStart(0, "div", 51);
161
- i0.ɵɵelement(1, "i", 52);
160
+ i0.ɵɵelementStart(0, "div", 52);
161
+ i0.ɵɵelement(1, "i", 53);
162
162
  i0.ɵɵelementStart(2, "p");
163
163
  i0.ɵɵtext(3, "No prompt executions found in this agent run.");
164
164
  i0.ɵɵelementEnd();
165
- i0.ɵɵelementStart(4, "p", 53);
165
+ i0.ɵɵelementStart(4, "p", 54);
166
166
  i0.ɵɵtext(5, "This agent run may have only executed actions without any AI prompts.");
167
167
  i0.ɵɵelementEnd()();
168
168
  } }
169
169
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
170
- i0.ɵɵelementStart(0, "div", 70);
171
- i0.ɵɵelement(1, "span", 71);
172
- i0.ɵɵelementStart(2, "span", 72);
170
+ i0.ɵɵelementStart(0, "div", 71);
171
+ i0.ɵɵelement(1, "span", 72);
172
+ i0.ɵɵelementStart(2, "span", 73);
173
173
  i0.ɵɵtext(3);
174
174
  i0.ɵɵelementEnd()();
175
175
  } if (rf & 2) {
@@ -181,8 +181,8 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Tem
181
181
  i0.ɵɵtextInterpolate3("", item_r6.key, ": ", item_r6.value.count, " (", (item_r6.value.count / ctx_r1.promptMetrics.totalCount * 100).toFixed(1), "%)");
182
182
  } }
183
183
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template(rf, ctx) { if (rf & 1) {
184
- i0.ɵɵelementStart(0, "div", 68);
185
- i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template, 4, 5, "div", 69);
184
+ i0.ɵɵelementStart(0, "div", 69);
185
+ i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_div_1_Template, 4, 5, "div", 70);
186
186
  i0.ɵɵpipe(2, "keyvalue");
187
187
  i0.ɵɵelementEnd();
188
188
  } if (rf & 2) {
@@ -192,56 +192,56 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template(
192
192
  } }
193
193
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template(rf, ctx) { if (rf & 1) {
194
194
  const _r5 = i0.ɵɵgetCurrentView();
195
- i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "div", 56);
195
+ i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "div", 57);
196
196
  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")); });
197
197
  i0.ɵɵelementStart(3, "h3");
198
- i0.ɵɵelement(4, "i", 57);
198
+ i0.ɵɵelement(4, "i", 58);
199
199
  i0.ɵɵtext(5, " Prompts by Model");
200
200
  i0.ɵɵelementEnd();
201
- i0.ɵɵelementStart(6, "button", 58);
202
- i0.ɵɵelement(7, "i", 47);
201
+ i0.ɵɵelementStart(6, "button", 59);
202
+ i0.ɵɵelement(7, "i", 48);
203
203
  i0.ɵɵelementEnd()();
204
- i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
205
- i0.ɵɵelement(10, "div", 61, 0);
206
- i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template, 3, 3, "div", 62);
204
+ i0.ɵɵelementStart(8, "div", 60)(9, "div", 61);
205
+ i0.ɵɵelement(10, "div", 62, 0);
206
+ i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_div_12_Template, 3, 3, "div", 63);
207
207
  i0.ɵɵelementEnd()()();
208
- i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
208
+ i0.ɵɵelementStart(13, "div", 56)(14, "div", 57);
209
209
  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")); });
210
210
  i0.ɵɵelementStart(15, "h3");
211
- i0.ɵɵelement(16, "i", 38);
211
+ i0.ɵɵelement(16, "i", 39);
212
212
  i0.ɵɵtext(17, " Average Execution Time by Vendor");
213
213
  i0.ɵɵelementEnd();
214
- i0.ɵɵelementStart(18, "button", 58);
215
- i0.ɵɵelement(19, "i", 47);
214
+ i0.ɵɵelementStart(18, "button", 59);
215
+ i0.ɵɵelement(19, "i", 48);
216
216
  i0.ɵɵelementEnd()();
217
- i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
218
- i0.ɵɵelement(22, "div", 63, 1);
217
+ i0.ɵɵelementStart(20, "div", 60)(21, "div", 61);
218
+ i0.ɵɵelement(22, "div", 64, 1);
219
219
  i0.ɵɵelementEnd()()();
220
- i0.ɵɵelementStart(24, "div", 55)(25, "div", 56);
220
+ i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
221
221
  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")); });
222
222
  i0.ɵɵelementStart(26, "h3");
223
- i0.ɵɵelement(27, "i", 36);
223
+ i0.ɵɵelement(27, "i", 37);
224
224
  i0.ɵɵtext(28, " Cost Distribution by Vendor");
225
225
  i0.ɵɵelementEnd();
226
- i0.ɵɵelementStart(29, "button", 58);
227
- i0.ɵɵelement(30, "i", 47);
226
+ i0.ɵɵelementStart(29, "button", 59);
227
+ i0.ɵɵelement(30, "i", 48);
228
228
  i0.ɵɵelementEnd()();
229
- i0.ɵɵelementStart(31, "div", 59)(32, "div", 60);
230
- i0.ɵɵelement(33, "div", 64, 2);
231
- i0.ɵɵelementStart(35, "div", 65);
229
+ i0.ɵɵelementStart(31, "div", 60)(32, "div", 61);
230
+ i0.ɵɵelement(33, "div", 65, 2);
231
+ i0.ɵɵelementStart(35, "div", 66);
232
232
  i0.ɵɵtext(36);
233
233
  i0.ɵɵelementEnd()()()();
234
- i0.ɵɵelementStart(37, "div", 55)(38, "div", 56);
234
+ i0.ɵɵelementStart(37, "div", 56)(38, "div", 57);
235
235
  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")); });
236
236
  i0.ɵɵelementStart(39, "h3");
237
- i0.ɵɵelement(40, "i", 66);
237
+ i0.ɵɵelement(40, "i", 67);
238
238
  i0.ɵɵtext(41, " Token Usage by Model");
239
239
  i0.ɵɵelementEnd();
240
- i0.ɵɵelementStart(42, "button", 58);
241
- i0.ɵɵelement(43, "i", 47);
240
+ i0.ɵɵelementStart(42, "button", 59);
241
+ i0.ɵɵelement(43, "i", 48);
242
242
  i0.ɵɵelementEnd()();
243
- i0.ɵɵelementStart(44, "div", 59)(45, "div", 60);
244
- i0.ɵɵelement(46, "div", 67, 3);
243
+ i0.ɵɵelementStart(44, "div", 60)(45, "div", 61);
244
+ i0.ɵɵelement(46, "div", 68, 3);
245
245
  i0.ɵɵelementEnd()()()();
246
246
  } if (rf & 2) {
247
247
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -268,53 +268,53 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template(rf, ctx
268
268
  } }
269
269
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template(rf, ctx) { if (rf & 1) {
270
270
  const _r7 = i0.ɵɵgetCurrentView();
271
- i0.ɵɵelementStart(0, "div", 73)(1, "div", 55)(2, "div", 56);
271
+ i0.ɵɵelementStart(0, "div", 74)(1, "div", 56)(2, "div", 57);
272
272
  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")); });
273
273
  i0.ɵɵelementStart(3, "h3");
274
- i0.ɵɵelement(4, "i", 74);
274
+ i0.ɵɵelement(4, "i", 75);
275
275
  i0.ɵɵtext(5, " Average Execution Time by Prompt");
276
276
  i0.ɵɵelementEnd();
277
- i0.ɵɵelementStart(6, "button", 58);
278
- i0.ɵɵelement(7, "i", 47);
277
+ i0.ɵɵelementStart(6, "button", 59);
278
+ i0.ɵɵelement(7, "i", 48);
279
279
  i0.ɵɵelementEnd()();
280
- i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
281
- i0.ɵɵelement(10, "div", 75, 4);
280
+ i0.ɵɵelementStart(8, "div", 60)(9, "div", 61);
281
+ i0.ɵɵelement(10, "div", 76, 4);
282
282
  i0.ɵɵelementEnd()()();
283
- i0.ɵɵelementStart(12, "div", 55)(13, "div", 56);
283
+ i0.ɵɵelementStart(12, "div", 56)(13, "div", 57);
284
284
  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")); });
285
285
  i0.ɵɵelementStart(14, "h3");
286
- i0.ɵɵelement(15, "i", 76);
286
+ i0.ɵɵelement(15, "i", 77);
287
287
  i0.ɵɵtext(16, " Token Usage by Prompt");
288
288
  i0.ɵɵelementEnd();
289
- i0.ɵɵelementStart(17, "button", 58);
290
- i0.ɵɵelement(18, "i", 47);
289
+ i0.ɵɵelementStart(17, "button", 59);
290
+ i0.ɵɵelement(18, "i", 48);
291
291
  i0.ɵɵelementEnd()();
292
- i0.ɵɵelementStart(19, "div", 59)(20, "div", 60);
293
- i0.ɵɵelement(21, "div", 77, 5);
292
+ i0.ɵɵelementStart(19, "div", 60)(20, "div", 61);
293
+ i0.ɵɵelement(21, "div", 78, 5);
294
294
  i0.ɵɵelementEnd()()();
295
- i0.ɵɵelementStart(23, "div", 55)(24, "div", 56);
295
+ i0.ɵɵelementStart(23, "div", 56)(24, "div", 57);
296
296
  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")); });
297
297
  i0.ɵɵelementStart(25, "h3");
298
- i0.ɵɵelement(26, "i", 57);
298
+ i0.ɵɵelement(26, "i", 58);
299
299
  i0.ɵɵtext(27, " Cost Distribution by Prompt");
300
300
  i0.ɵɵelementEnd();
301
- i0.ɵɵelementStart(28, "button", 58);
302
- i0.ɵɵelement(29, "i", 47);
301
+ i0.ɵɵelementStart(28, "button", 59);
302
+ i0.ɵɵelement(29, "i", 48);
303
303
  i0.ɵɵelementEnd()();
304
- i0.ɵɵelementStart(30, "div", 59)(31, "div", 60);
305
- i0.ɵɵelement(32, "div", 78, 6);
304
+ i0.ɵɵelementStart(30, "div", 60)(31, "div", 61);
305
+ i0.ɵɵelement(32, "div", 79, 6);
306
306
  i0.ɵɵelementEnd()()();
307
- i0.ɵɵelementStart(34, "div", 55)(35, "div", 56);
307
+ i0.ɵɵelementStart(34, "div", 56)(35, "div", 57);
308
308
  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")); });
309
309
  i0.ɵɵelementStart(36, "h3");
310
- i0.ɵɵelement(37, "i", 79);
310
+ i0.ɵɵelement(37, "i", 80);
311
311
  i0.ɵɵtext(38, " Prompt Execution Count");
312
312
  i0.ɵɵelementEnd();
313
- i0.ɵɵelementStart(39, "button", 58);
314
- i0.ɵɵelement(40, "i", 47);
313
+ i0.ɵɵelementStart(39, "button", 59);
314
+ i0.ɵɵelement(40, "i", 48);
315
315
  i0.ɵɵelementEnd()();
316
- i0.ɵɵelementStart(41, "div", 59)(42, "div", 60);
317
- i0.ɵɵelement(43, "div", 80, 7);
316
+ i0.ɵɵelementStart(41, "div", 60)(42, "div", 61);
317
+ i0.ɵɵelement(43, "div", 81, 7);
318
318
  i0.ɵɵelementEnd()()()();
319
319
  } if (rf & 2) {
320
320
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -348,7 +348,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template(r
348
348
  i0.ɵɵelementStart(7, "td");
349
349
  i0.ɵɵtext(8);
350
350
  i0.ɵɵelementEnd();
351
- i0.ɵɵelementStart(9, "td")(10, "span", 83);
351
+ i0.ɵɵelementStart(9, "td")(10, "span", 84);
352
352
  i0.ɵɵtext(11);
353
353
  i0.ɵɵelementEnd()()();
354
354
  } if (rf & 2) {
@@ -366,7 +366,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template(r
366
366
  i0.ɵɵtextInterpolate1(" ", ctx_r1.calculatePromptSuccessRate(prompt_r8.key), "% ");
367
367
  } }
368
368
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx) { if (rf & 1) {
369
- i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
369
+ i0.ɵɵelementStart(0, "div", 82)(1, "table")(2, "thead")(3, "tr")(4, "th");
370
370
  i0.ɵɵtext(5, "Prompt Name");
371
371
  i0.ɵɵelementEnd();
372
372
  i0.ɵɵelementStart(6, "th");
@@ -382,7 +382,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx
382
382
  i0.ɵɵtext(13, "Success Rate");
383
383
  i0.ɵɵelementEnd()()();
384
384
  i0.ɵɵelementStart(14, "tbody");
385
- i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template, 12, 5, "tr", 82);
385
+ i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_tr_15_Template, 12, 5, "tr", 83);
386
386
  i0.ɵɵpipe(16, "keyvalue");
387
387
  i0.ɵɵelementEnd()()();
388
388
  } if (rf & 2) {
@@ -392,14 +392,14 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template(rf, ctx
392
392
  } }
393
393
  function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template(rf, ctx) { if (rf & 1) {
394
394
  const _r3 = i0.ɵɵgetCurrentView();
395
- i0.ɵɵelementStart(0, "div", 40);
396
- 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);
397
- i0.ɵɵelementStart(5, "div", 45)(6, "button", 46);
395
+ i0.ɵɵelementStart(0, "div", 41);
396
+ i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_1_Template, 4, 2, "div", 42)(2, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_2_Template, 6, 0, "div", 43)(3, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_3_Template, 48, 14, "div", 44)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_4_Template, 45, 12, "div", 45);
397
+ i0.ɵɵelementStart(5, "div", 46)(6, "button", 47);
398
398
  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); });
399
- i0.ɵɵelement(7, "i", 47);
399
+ i0.ɵɵelement(7, "i", 48);
400
400
  i0.ɵɵtext(8, " Detailed Prompt Metrics ");
401
401
  i0.ɵɵelementEnd();
402
- i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template, 17, 3, "div", 48);
402
+ i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_7_div_9_Template, 17, 3, "div", 49);
403
403
  i0.ɵɵelementEnd()();
404
404
  } if (rf & 2) {
405
405
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -417,7 +417,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template(rf, ctx) { if
417
417
  i0.ɵɵproperty("ngIf", ctx_r1.promptDetailsExpanded);
418
418
  } }
419
419
  function AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template(rf, ctx) { if (rf & 1) {
420
- i0.ɵɵelement(0, "i", 34);
420
+ i0.ɵɵelement(0, "i", 35);
421
421
  i0.ɵɵtext(1, " Action Analytics ");
422
422
  } }
423
423
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template(rf, ctx) { if (rf & 1) {
@@ -430,7 +430,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template
430
430
  i0.ɵɵelementStart(5, "td");
431
431
  i0.ɵɵtext(6);
432
432
  i0.ɵɵelementEnd();
433
- i0.ɵɵelementStart(7, "td")(8, "span", 83);
433
+ i0.ɵɵelementStart(7, "td")(8, "span", 84);
434
434
  i0.ɵɵtext(9);
435
435
  i0.ɵɵelementEnd()();
436
436
  i0.ɵɵelementStart(10, "td");
@@ -453,7 +453,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template
453
453
  i0.ɵɵtextInterpolate(ctx_r1.getActionType(action_r10.key));
454
454
  } }
455
455
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, ctx) { if (rf & 1) {
456
- i0.ɵɵelementStart(0, "div", 81)(1, "table")(2, "thead")(3, "tr")(4, "th");
456
+ i0.ɵɵelementStart(0, "div", 82)(1, "table")(2, "thead")(3, "tr")(4, "th");
457
457
  i0.ɵɵtext(5, "Action Name");
458
458
  i0.ɵɵelementEnd();
459
459
  i0.ɵɵelementStart(6, "th");
@@ -469,7 +469,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, c
469
469
  i0.ɵɵtext(13, "Type");
470
470
  i0.ɵɵelementEnd()()();
471
471
  i0.ɵɵelementStart(14, "tbody");
472
- i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template, 12, 11, "tr", 82);
472
+ i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_tr_15_Template, 12, 11, "tr", 83);
473
473
  i0.ɵɵpipe(16, "keyvalue");
474
474
  i0.ɵɵelementEnd()()();
475
475
  } if (rf & 2) {
@@ -478,10 +478,10 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template(rf, c
478
478
  i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 1, ctx_r1.actionMetrics.byAction));
479
479
  } }
480
480
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template(rf, ctx) { if (rf & 1) {
481
- i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
481
+ i0.ɵɵelementStart(0, "div", 97)(1, "span", 98);
482
482
  i0.ɵɵtext(2);
483
483
  i0.ɵɵelementEnd();
484
- i0.ɵɵelementStart(3, "span", 98);
484
+ i0.ɵɵelementStart(3, "span", 99);
485
485
  i0.ɵɵtext(4);
486
486
  i0.ɵɵelementEnd()();
487
487
  } if (rf & 2) {
@@ -492,15 +492,15 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template
492
492
  i0.ɵɵtextInterpolate(error_r11.message);
493
493
  } }
494
494
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template(rf, ctx) { if (rf & 1) {
495
- i0.ɵɵelementStart(0, "div", 91)(1, "h3");
496
- i0.ɵɵelement(2, "i", 92);
495
+ i0.ɵɵelementStart(0, "div", 92)(1, "h3");
496
+ i0.ɵɵelement(2, "i", 93);
497
497
  i0.ɵɵtext(3, " Common Errors ");
498
498
  i0.ɵɵelementEnd();
499
- i0.ɵɵelementStart(4, "p", 93);
499
+ i0.ɵɵelementStart(4, "p", 94);
500
500
  i0.ɵɵtext(5, " This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention. ");
501
501
  i0.ɵɵelementEnd();
502
- i0.ɵɵelementStart(6, "div", 94);
503
- i0.ɵɵtemplate(7, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template, 5, 2, "div", 95);
502
+ i0.ɵɵelementStart(6, "div", 95);
503
+ i0.ɵɵtemplate(7, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_div_7_Template, 5, 2, "div", 96);
504
504
  i0.ɵɵelementEnd()();
505
505
  } if (rf & 2) {
506
506
  const ctx_r1 = i0.ɵɵnextContext(3);
@@ -508,47 +508,47 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template(rf, c
508
508
  i0.ɵɵproperty("ngForOf", ctx_r1.getTopErrors());
509
509
  } }
510
510
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template(rf, ctx) { if (rf & 1) {
511
- i0.ɵɵelementStart(0, "div", 99);
512
- i0.ɵɵelement(1, "i", 100);
511
+ i0.ɵɵelementStart(0, "div", 100);
512
+ i0.ɵɵelement(1, "i", 101);
513
513
  i0.ɵɵelementStart(2, "p");
514
514
  i0.ɵɵtext(3, "No action errors detected in this run. All actions completed successfully!");
515
515
  i0.ɵɵelementEnd()();
516
516
  } }
517
517
  function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template(rf, ctx) { if (rf & 1) {
518
518
  const _r9 = i0.ɵɵgetCurrentView();
519
- i0.ɵɵelementStart(0, "div", 40)(1, "div", 54)(2, "div", 55)(3, "div", 56);
519
+ i0.ɵɵelementStart(0, "div", 41)(1, "div", 55)(2, "div", 56)(3, "div", 57);
520
520
  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")); });
521
521
  i0.ɵɵelementStart(4, "h3");
522
- i0.ɵɵelement(5, "i", 84);
522
+ i0.ɵɵelement(5, "i", 85);
523
523
  i0.ɵɵtext(6, " Action Success Rate");
524
524
  i0.ɵɵelementEnd();
525
- i0.ɵɵelementStart(7, "button", 58);
526
- i0.ɵɵelement(8, "i", 47);
525
+ i0.ɵɵelementStart(7, "button", 59);
526
+ i0.ɵɵelement(8, "i", 48);
527
527
  i0.ɵɵelementEnd()();
528
- i0.ɵɵelementStart(9, "div", 59)(10, "div", 60);
529
- i0.ɵɵelement(11, "div", 85, 8);
528
+ i0.ɵɵelementStart(9, "div", 60)(10, "div", 61);
529
+ i0.ɵɵelement(11, "div", 86, 8);
530
530
  i0.ɵɵelementEnd()()();
531
- i0.ɵɵelementStart(13, "div", 55)(14, "div", 56);
531
+ i0.ɵɵelementStart(13, "div", 56)(14, "div", 57);
532
532
  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")); });
533
533
  i0.ɵɵelementStart(15, "h3");
534
- i0.ɵɵelement(16, "i", 86);
534
+ i0.ɵɵelement(16, "i", 87);
535
535
  i0.ɵɵtext(17, " Step Type Distribution");
536
536
  i0.ɵɵelementEnd();
537
- i0.ɵɵelementStart(18, "button", 58);
538
- i0.ɵɵelement(19, "i", 47);
537
+ i0.ɵɵelementStart(18, "button", 59);
538
+ i0.ɵɵelement(19, "i", 48);
539
539
  i0.ɵɵelementEnd()();
540
- i0.ɵɵelementStart(20, "div", 59)(21, "div", 60);
541
- i0.ɵɵelement(22, "div", 87, 9);
540
+ i0.ɵɵelementStart(20, "div", 60)(21, "div", 61);
541
+ i0.ɵɵelement(22, "div", 88, 9);
542
542
  i0.ɵɵelementEnd()()()();
543
- i0.ɵɵelementStart(24, "div", 45)(25, "button", 46);
543
+ i0.ɵɵelementStart(24, "div", 46)(25, "button", 47);
544
544
  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); });
545
- i0.ɵɵelement(26, "i", 47);
545
+ i0.ɵɵelement(26, "i", 48);
546
546
  i0.ɵɵtext(27, " Detailed Action Metrics ");
547
547
  i0.ɵɵelementEnd();
548
- i0.ɵɵtemplate(28, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template, 17, 3, "div", 48);
548
+ i0.ɵɵtemplate(28, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_28_Template, 17, 3, "div", 49);
549
549
  i0.ɵɵelementEnd();
550
- i0.ɵɵelementStart(29, "div", 88);
551
- 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);
550
+ i0.ɵɵelementStart(29, "div", 89);
551
+ i0.ɵɵtemplate(30, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_30_Template, 8, 1, "div", 90)(31, AIAgentRunAnalyticsComponent_div_3_ng_template_10_div_31_Template, 4, 0, "div", 91);
552
552
  i0.ɵɵelementEnd()();
553
553
  } if (rf & 2) {
554
554
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -570,7 +570,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template(rf, ctx) { i
570
570
  i0.ɵɵproperty("ngIf", ctx_r1.actionMetrics.errorAnalysis.size === 0);
571
571
  } }
572
572
  function AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template(rf, ctx) { if (rf & 1) {
573
- i0.ɵɵelement(0, "i", 101);
573
+ i0.ɵɵelement(0, "i", 102);
574
574
  i0.ɵɵtext(1, " Model Performance Comparison ");
575
575
  } }
576
576
  function AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template(rf, ctx) { if (rf & 1) {
@@ -621,7 +621,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template(rf, ct
621
621
  i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 11, model_r12.outputTokens, "1.0-0"));
622
622
  } }
623
623
  function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { if (rf & 1) {
624
- i0.ɵɵelementStart(0, "div", 40)(1, "div", 102)(2, "table")(3, "thead")(4, "tr")(5, "th");
624
+ i0.ɵɵelementStart(0, "div", 41)(1, "div", 103)(2, "table")(3, "thead")(4, "tr")(5, "th");
625
625
  i0.ɵɵtext(6, "Model");
626
626
  i0.ɵɵelementEnd();
627
627
  i0.ɵɵelementStart(7, "th");
@@ -646,7 +646,7 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { i
646
646
  i0.ɵɵtext(20, "Output Tokens");
647
647
  i0.ɵɵelementEnd()()();
648
648
  i0.ɵɵelementStart(21, "tbody");
649
- i0.ɵɵtemplate(22, AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template, 19, 14, "tr", 82);
649
+ i0.ɵɵtemplate(22, AIAgentRunAnalyticsComponent_div_3_ng_template_13_tr_22_Template, 19, 14, "tr", 83);
650
650
  i0.ɵɵelementEnd()()()();
651
651
  } if (rf & 2) {
652
652
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -654,19 +654,19 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template(rf, ctx) { i
654
654
  i0.ɵɵproperty("ngForOf", ctx_r1.getModelPerformanceData());
655
655
  } }
656
656
  function AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template(rf, ctx) { if (rf & 1) {
657
- i0.ɵɵelement(0, "i", 103);
657
+ i0.ɵɵelement(0, "i", 104);
658
658
  i0.ɵɵtext(1, " Execution Timeline Analysis ");
659
659
  } }
660
660
  function AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template(rf, ctx) { if (rf & 1) {
661
- i0.ɵɵelementStart(0, "div", 111);
662
- i0.ɵɵelement(1, "i", 47);
663
- i0.ɵɵelementStart(2, "span", 112);
661
+ i0.ɵɵelementStart(0, "div", 112);
662
+ i0.ɵɵelement(1, "i", 48);
663
+ i0.ɵɵelementStart(2, "span", 113);
664
664
  i0.ɵɵtext(3);
665
665
  i0.ɵɵelementEnd();
666
- i0.ɵɵelementStart(4, "span", 113);
666
+ i0.ɵɵelementStart(4, "span", 114);
667
667
  i0.ɵɵtext(5);
668
668
  i0.ɵɵelementEnd();
669
- i0.ɵɵelementStart(6, "span", 114);
669
+ i0.ɵɵelementStart(6, "span", 115);
670
670
  i0.ɵɵtext(7);
671
671
  i0.ɵɵelementEnd()();
672
672
  } if (rf & 2) {
@@ -682,35 +682,35 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template(rf, c
682
682
  i0.ɵɵtextInterpolate1("(", (type_r13.value / ctx_r1.timelineMetrics.totalSteps * 100).toFixed(1), "%)");
683
683
  } }
684
684
  function AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template(rf, ctx) { if (rf & 1) {
685
- i0.ɵɵelementStart(0, "div", 40)(1, "div", 104)(2, "div", 105)(3, "span", 106);
685
+ i0.ɵɵelementStart(0, "div", 41)(1, "div", 105)(2, "div", 106)(3, "span", 107);
686
686
  i0.ɵɵtext(4, "Total Steps");
687
687
  i0.ɵɵelementEnd();
688
- i0.ɵɵelementStart(5, "span", 107);
688
+ i0.ɵɵelementStart(5, "span", 108);
689
689
  i0.ɵɵtext(6);
690
690
  i0.ɵɵelementEnd()();
691
- i0.ɵɵelementStart(7, "div", 105)(8, "span", 106);
691
+ i0.ɵɵelementStart(7, "div", 106)(8, "span", 107);
692
692
  i0.ɵɵtext(9, "Parallel Executions");
693
693
  i0.ɵɵelementEnd();
694
- i0.ɵɵelementStart(10, "span", 107);
694
+ i0.ɵɵelementStart(10, "span", 108);
695
695
  i0.ɵɵtext(11);
696
696
  i0.ɵɵelementEnd()();
697
- i0.ɵɵelementStart(12, "div", 105)(13, "span", 106);
697
+ i0.ɵɵelementStart(12, "div", 106)(13, "span", 107);
698
698
  i0.ɵɵtext(14, "Max Nesting Depth");
699
699
  i0.ɵɵelementEnd();
700
- i0.ɵɵelementStart(15, "span", 107);
700
+ i0.ɵɵelementStart(15, "span", 108);
701
701
  i0.ɵɵtext(16);
702
702
  i0.ɵɵelementEnd()();
703
- i0.ɵɵelementStart(17, "div", 105)(18, "span", 106);
703
+ i0.ɵɵelementStart(17, "div", 106)(18, "span", 107);
704
704
  i0.ɵɵtext(19, "Sub-Agent Runs");
705
705
  i0.ɵɵelementEnd();
706
- i0.ɵɵelementStart(20, "span", 107);
706
+ i0.ɵɵelementStart(20, "span", 108);
707
707
  i0.ɵɵtext(21);
708
708
  i0.ɵɵelementEnd()()();
709
- i0.ɵɵelementStart(22, "div", 108)(23, "h3");
709
+ i0.ɵɵelementStart(22, "div", 109)(23, "h3");
710
710
  i0.ɵɵtext(24, "Steps by Type");
711
711
  i0.ɵɵelementEnd();
712
- i0.ɵɵelementStart(25, "div", 109);
713
- i0.ɵɵtemplate(26, AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template, 8, 4, "div", 110);
712
+ i0.ɵɵelementStart(25, "div", 110);
713
+ i0.ɵɵtemplate(26, AIAgentRunAnalyticsComponent_div_3_ng_template_16_div_26_Template, 8, 4, "div", 111);
714
714
  i0.ɵɵpipe(27, "keyvalue");
715
715
  i0.ɵɵelementEnd()()();
716
716
  } if (rf & 2) {
@@ -727,23 +727,25 @@ function AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template(rf, ctx) { i
727
727
  i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(27, 5, ctx_r1.timelineMetrics.stepsByType));
728
728
  } }
729
729
  function AIAgentRunAnalyticsComponent_div_3_Template(rf, ctx) { if (rf & 1) {
730
- i0.ɵɵelementStart(0, "div", 19)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 20);
731
- 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);
730
+ i0.ɵɵelementStart(0, "div", 19)(1, "kendo-panelbar", 20)(2, "kendo-panelbar-item", 21);
731
+ i0.ɵɵtemplate(3, AIAgentRunAnalyticsComponent_div_3_ng_template_3_Template, 2, 0, "ng-template", 22)(4, AIAgentRunAnalyticsComponent_div_3_ng_template_4_Template, 47, 10, "ng-template", 23);
732
732
  i0.ɵɵelementEnd();
733
- i0.ɵɵelementStart(5, "kendo-panelbar-item", 20);
734
- 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);
733
+ i0.ɵɵelementStart(5, "kendo-panelbar-item", 21);
734
+ i0.ɵɵtemplate(6, AIAgentRunAnalyticsComponent_div_3_ng_template_6_Template, 2, 0, "ng-template", 22)(7, AIAgentRunAnalyticsComponent_div_3_ng_template_7_Template, 10, 6, "ng-template", 23);
735
735
  i0.ɵɵelementEnd();
736
- i0.ɵɵelementStart(8, "kendo-panelbar-item", 20);
737
- 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);
736
+ i0.ɵɵelementStart(8, "kendo-panelbar-item", 21);
737
+ i0.ɵɵtemplate(9, AIAgentRunAnalyticsComponent_div_3_ng_template_9_Template, 2, 0, "ng-template", 22)(10, AIAgentRunAnalyticsComponent_div_3_ng_template_10_Template, 32, 10, "ng-template", 23);
738
738
  i0.ɵɵelementEnd();
739
- i0.ɵɵelementStart(11, "kendo-panelbar-item", 20);
740
- 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);
739
+ i0.ɵɵelementStart(11, "kendo-panelbar-item", 21);
740
+ i0.ɵɵtemplate(12, AIAgentRunAnalyticsComponent_div_3_ng_template_12_Template, 2, 0, "ng-template", 22)(13, AIAgentRunAnalyticsComponent_div_3_ng_template_13_Template, 23, 1, "ng-template", 23);
741
741
  i0.ɵɵelementEnd();
742
- i0.ɵɵelementStart(14, "kendo-panelbar-item", 20);
743
- 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);
742
+ i0.ɵɵelementStart(14, "kendo-panelbar-item", 21);
743
+ i0.ɵɵtemplate(15, AIAgentRunAnalyticsComponent_div_3_ng_template_15_Template, 2, 0, "ng-template", 22)(16, AIAgentRunAnalyticsComponent_div_3_ng_template_16_Template, 28, 7, "ng-template", 23);
744
744
  i0.ɵɵelementEnd()()();
745
745
  } if (rf & 2) {
746
- i0.ɵɵadvance(2);
746
+ i0.ɵɵadvance();
747
+ i0.ɵɵproperty("keepItemContent", true);
748
+ i0.ɵɵadvance();
747
749
  i0.ɵɵproperty("expanded", true);
748
750
  i0.ɵɵadvance(3);
749
751
  i0.ɵɵproperty("expanded", true);
@@ -2052,9 +2054,9 @@ export class AIAgentRunAnalyticsComponent {
2052
2054
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptTokenDistributionChart = _t.first);
2053
2055
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCostDistributionChart = _t.first);
2054
2056
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.promptCountByNameChart = _t.first);
2055
- } }, 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) {
2057
+ } }, inputs: { agentRunId: "agentRunId" }, decls: 4, vars: 3, consts: [["modelDistributionChart", ""], ["executionTimeChart", ""], ["costByVendorChart", ""], ["tokenUsageChart", ""], ["promptTimeDistributionChart", ""], ["promptTokenDistributionChart", ""], ["promptCostDistributionChart", ""], ["promptCountByNameChart", ""], ["actionSuccessRateChart", ""], ["stepTypeChart", ""], [1, "analytics-container"], ["class", "loading-state", 4, "ngIf"], ["class", "error-state", 4, "ngIf"], ["class", "analytics-content", 4, "ngIf"], [1, "loading-state"], [1, "fas", "fa-spinner", "fa-spin", "fa-2x"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle", "fa-2x"], ["kendoButton", "", 3, "click"], [1, "analytics-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], [1, "fas", "fa-tachometer-alt"], [1, "summary-cards"], [1, "summary-card"], [1, "card-icon", "prompts"], [1, "fas", "fa-microchip"], [1, "card-content"], [1, "metric-value"], [1, "metric-detail"], [1, "success"], ["class", "failed", 4, "ngIf"], [1, "card-icon", "actions"], [1, "fas", "fa-cog"], [1, "card-icon", "cost"], [1, "fas", "fa-dollar-sign"], [1, "card-icon", "time"], [1, "fas", "fa-clock"], [1, "failed"], [1, "analytics-panel"], ["class", "view-mode-toggle", 4, "ngIf"], ["class", "no-data-message", 4, "ngIf"], ["class", "charts-grid", 4, "ngIf"], ["class", "charts-grid", "style", "margin-top: 20px;", 4, "ngIf"], [1, "detailed-metrics"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "fas", 3, "ngClass"], ["class", "metrics-table", 4, "ngIf"], [1, "view-mode-toggle"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "no-data-message"], [1, "fas", "fa-info-circle"], [1, "small"], [1, "charts-grid"], [1, "chart-card"], [1, "chart-card-header", 3, "click"], [1, "fas", "fa-chart-pie"], [1, "expand-btn"], [1, "chart-card-body"], [1, "chart-container"], ["id", "modelDistributionChart"], ["class", "chart-legend", 4, "ngIf"], ["id", "executionTimeChart"], ["id", "costByVendorChart"], [1, "chart-total"], [1, "fas", "fa-coins"], ["id", "tokenUsageChart"], [1, "chart-legend"], ["class", "legend-item", 4, "ngFor", "ngForOf"], [1, "legend-item"], [1, "legend-color"], [1, "legend-label"], [1, "charts-grid", 2, "margin-top", "20px"], [1, "fas", "fa-hourglass-half"], ["id", "promptTimeDistributionChart"], [1, "fas", "fa-database"], ["id", "promptTokenDistributionChart"], ["id", "promptCostDistributionChart"], [1, "fas", "fa-list-ol"], ["id", "promptCountByNameChart"], [1, "metrics-table"], [4, "ngFor", "ngForOf"], [1, "success-rate"], [1, "fas", "fa-chart-bar"], ["id", "actionSuccessRateChart"], [1, "fas", "fa-layer-group"], ["id", "stepTypeChart"], [1, "error-analysis-section"], ["class", "error-analysis", 4, "ngIf"], ["class", "no-errors", 4, "ngIf"], [1, "error-analysis"], [1, "fas", "fa-exclamation-triangle"], [1, "error-analysis-description"], [1, "error-list"], ["class", "error-item", 4, "ngFor", "ngForOf"], [1, "error-item"], [1, "error-count"], [1, "error-message"], [1, "no-errors"], [1, "fas", "fa-check-circle"], [1, "fas", "fa-chart-line"], [1, "model-comparison"], [1, "fas", "fa-stream"], [1, "timeline-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "step-breakdown"], [1, "step-type-list"], ["class", "step-type-item", 4, "ngFor", "ngForOf"], [1, "step-type-item"], [1, "type-name"], [1, "type-count"], [1, "type-percentage"]], template: function AIAgentRunAnalyticsComponent_Template(rf, ctx) { if (rf & 1) {
2056
2058
  i0.ɵɵelementStart(0, "div", 10);
2057
- 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);
2059
+ i0.ɵɵtemplate(1, AIAgentRunAnalyticsComponent_div_1_Template, 4, 0, "div", 11)(2, AIAgentRunAnalyticsComponent_div_2_Template, 6, 1, "div", 12)(3, AIAgentRunAnalyticsComponent_div_3_Template, 17, 6, "div", 13);
2058
2060
  i0.ɵɵelementEnd();
2059
2061
  } if (rf & 2) {
2060
2062
  i0.ɵɵadvance();
@@ -2067,7 +2069,7 @@ export class AIAgentRunAnalyticsComponent {
2067
2069
  }
2068
2070
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunAnalyticsComponent, [{
2069
2071
  type: Component,
2070
- 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}"] }]
2072
+ args: [{ selector: 'mj-ai-agent-run-analytics', template: "<div class=\"analytics-container\">\n <!-- Loading State -->\n <div class=\"loading-state\" *ngIf=\"isLoading\">\n <i class=\"fas fa-spinner fa-spin fa-2x\"></i>\n <p>Loading analytics data...</p>\n </div>\n\n <!-- Error State -->\n <div class=\"error-state\" *ngIf=\"error && !isLoading\">\n <i class=\"fas fa-exclamation-triangle fa-2x\"></i>\n <p>{{ error }}</p>\n <button kendoButton (click)=\"loadData()\">Retry</button>\n </div>\n\n <!-- Analytics Content -->\n <div class=\"analytics-content\" *ngIf=\"!isLoading && !error\">\n <kendo-panelbar [keepItemContent]=\"true\">\n <!-- Summary Cards -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-tachometer-alt\"></i> Overview\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"summary-cards\">\n <div class=\"summary-card\">\n <div class=\"card-icon prompts\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Prompts</h3>\n <div class=\"metric-value\">{{ promptMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ promptMetrics.statusBreakdown.success }} successful</span>\n <span class=\"failed\" *ngIf=\"promptMetrics.statusBreakdown.failed > 0\">{{ promptMetrics.statusBreakdown.failed }} failed</span>\n </div>\n </div>\n </div>\n\n <div class=\"summary-card\">\n <div class=\"card-icon actions\">\n <i class=\"fas fa-cog\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Actions</h3>\n <div class=\"metric-value\">{{ actionMetrics.totalCount }}</div>\n <div class=\"metric-detail\">\n <span class=\"success\">{{ actionMetrics.statusBreakdown.success }} successful</span>\n <span class=\"failed\" *ngIf=\"actionMetrics.statusBreakdown.failed > 0\">{{ actionMetrics.statusBreakdown.failed }} failed</span>\n </div>\n </div>\n </div>\n\n <div class=\"summary-card\">\n <div class=\"card-icon cost\">\n <i class=\"fas fa-dollar-sign\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Total Cost</h3>\n <div class=\"metric-value\">{{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n <div class=\"metric-detail\">\n <span>{{ promptMetrics.tokenUsage.totalInput + promptMetrics.tokenUsage.totalOutput }} tokens</span>\n </div>\n </div>\n </div>\n\n <div class=\"summary-card\">\n <div class=\"card-icon time\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"card-content\">\n <h3>Execution Time</h3>\n <div class=\"metric-value\">{{ formatDuration(promptMetrics.totalExecutionTime + actionMetrics.totalExecutionTime) }}</div>\n <div class=\"metric-detail\">\n <span>{{ timelineMetrics.totalSteps }} total steps</span>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Prompt Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-microchip\"></i> Prompt Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n <!-- View Mode Toggle -->\n <div class=\"view-mode-toggle\" *ngIf=\"promptMetrics.totalCount > 0\">\n <button kendoButton \n fillMode=\"flat\" \n size=\"small\"\n (click)=\"toggleViewMode()\">\n <i class=\"fas\" [ngClass]=\"viewMode === 'grid' ? 'fa-expand-arrows-alt' : 'fa-compress-arrows-alt'\"></i>\n {{ viewMode === 'grid' ? 'Expand All' : 'Collapse All' }}\n </button>\n </div>\n \n <!-- No prompts message -->\n <div class=\"no-data-message\" *ngIf=\"promptMetrics.totalCount === 0\">\n <i class=\"fas fa-info-circle\"></i>\n <p>No prompt executions found in this agent run.</p>\n <p class=\"small\">This agent run may have only executed actions without any AI prompts.</p>\n </div>\n\n <div class=\"charts-grid\" *ngIf=\"promptMetrics.totalCount > 0\">\n <!-- Model Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['modelDistribution']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('modelDistribution')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Prompts by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['modelDistribution'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"modelDistributionChart\" #modelDistributionChart></div>\n <div class=\"chart-legend\" *ngIf=\"promptMetrics.byModel.size > 0\">\n <div class=\"legend-item\" *ngFor=\"let item of promptMetrics.byModel | keyvalue\">\n <span class=\"legend-color\" [style.backgroundColor]=\"getModelColor(item.key)\"></span>\n <span class=\"legend-label\">{{ item.key }}: {{ item.value.count }} ({{ (item.value.count / promptMetrics.totalCount * 100).toFixed(1) }}%)</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Execution Time by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['executionTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('executionTime')\">\n <h3><i class=\"fas fa-clock\"></i> Average Execution Time by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['executionTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"executionTimeChart\" #executionTimeChart></div>\n </div>\n </div>\n </div>\n\n <!-- Cost by Vendor -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['costByVendor']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('costByVendor')\">\n <h3><i class=\"fas fa-dollar-sign\"></i> Cost Distribution by Vendor</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['costByVendor'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"costByVendorChart\" #costByVendorChart></div>\n <div class=\"chart-total\">Total: {{ formatCost(promptMetrics.costBreakdown.totalCost) }}</div>\n </div>\n </div>\n </div>\n\n <!-- Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['tokenUsage']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('tokenUsage')\">\n <h3><i class=\"fas fa-coins\"></i> Token Usage by Model</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['tokenUsage'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"tokenUsageChart\" #tokenUsageChart></div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Additional Prompt Analytics Charts -->\n <div class=\"charts-grid\" style=\"margin-top: 20px;\" *ngIf=\"promptMetrics.totalCount > 0\">\n <!-- Prompt Execution Time Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptTime']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptTime')\">\n <h3><i class=\"fas fa-hourglass-half\"></i> Average Execution Time by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptTime'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTimeDistributionChart\" #promptTimeDistributionChart></div>\n </div>\n </div>\n </div>\n\n <!-- Prompt Token Usage -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptToken']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptToken')\">\n <h3><i class=\"fas fa-database\"></i> Token Usage by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptToken'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptTokenDistributionChart\" #promptTokenDistributionChart></div>\n </div>\n </div>\n </div>\n\n <!-- Prompt Cost Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCost']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCost')\">\n <h3><i class=\"fas fa-chart-pie\"></i> Cost Distribution by Prompt</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCost'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCostDistributionChart\" #promptCostDistributionChart></div>\n </div>\n </div>\n </div>\n\n <!-- Prompt Count by Name -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['promptCount']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('promptCount')\">\n <h3><i class=\"fas fa-list-ol\"></i> Prompt Execution Count</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['promptCount'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"promptCountByNameChart\" #promptCountByNameChart></div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Detailed Prompt Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton \n fillMode=\"flat\" \n (click)=\"promptDetailsExpanded = !promptDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"promptDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Prompt Metrics\n </button>\n \n <div class=\"metrics-table\" *ngIf=\"promptDetailsExpanded\">\n <table>\n <thead>\n <tr>\n <th>Prompt Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Total Time</th>\n <th>Success Rate</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let prompt of promptMetrics.byPrompt | keyvalue\">\n <td>{{ prompt.key }}</td>\n <td>{{ prompt.value.count }}</td>\n <td>{{ formatDuration(prompt.value.avgTime) }}</td>\n <td>{{ formatDuration(prompt.value.totalTime) }}</td>\n <td>\n <span class=\"success-rate\">\n <!-- Calculate success rate for this prompt -->\n {{ calculatePromptSuccessRate(prompt.key) }}%\n </span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Action Analytics -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-cog\"></i> Action Analytics\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n\n <div class=\"charts-grid\">\n <!-- Action Success Rate -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['actionSuccess']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('actionSuccess')\">\n <h3><i class=\"fas fa-chart-bar\"></i> Action Success Rate</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['actionSuccess'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"actionSuccessRateChart\" #actionSuccessRateChart></div>\n </div>\n </div>\n </div>\n\n <!-- Step Type Distribution -->\n <div class=\"chart-card\" [class.expanded]=\"expandedCharts['stepType']\">\n <div class=\"chart-card-header\" (click)=\"toggleChartExpansion('stepType')\">\n <h3><i class=\"fas fa-layer-group\"></i> Step Type Distribution</h3>\n <button class=\"expand-btn\">\n <i class=\"fas\" [ngClass]=\"expandedCharts['stepType'] ? 'fa-compress' : 'fa-expand'\"></i>\n </button>\n </div>\n <div class=\"chart-card-body\">\n <div class=\"chart-container\">\n <div id=\"stepTypeChart\" #stepTypeChart></div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Detailed Action Metrics -->\n <div class=\"detailed-metrics\">\n <button kendoButton \n fillMode=\"flat\" \n (click)=\"actionDetailsExpanded = !actionDetailsExpanded\">\n <i class=\"fas\" [ngClass]=\"actionDetailsExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n Detailed Action Metrics\n </button>\n \n <div class=\"metrics-table\" *ngIf=\"actionDetailsExpanded\">\n <table>\n <thead>\n <tr>\n <th>Action Name</th>\n <th>Count</th>\n <th>Avg Time</th>\n <th>Success Rate</th>\n <th>Type</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let action of actionMetrics.byAction | keyvalue\">\n <td>{{ action.key }}</td>\n <td>{{ action.value.count }}</td>\n <td>{{ formatDuration(action.value.avgTime) }}</td>\n <td>\n <span class=\"success-rate\" [class.high]=\"action.value.successRate > 0.9\" \n [class.medium]=\"action.value.successRate > 0.7 && action.value.successRate <= 0.9\"\n [class.low]=\"action.value.successRate <= 0.7\">\n {{ (action.value.successRate * 100).toFixed(1) }}%\n </span>\n </td>\n <td>{{ getActionType(action.key) }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n <!-- Error Analysis -->\n <div class=\"error-analysis-section\">\n <div class=\"error-analysis\" *ngIf=\"actionMetrics.errorAnalysis.size > 0\">\n <h3>\n <i class=\"fas fa-exclamation-triangle\"></i>\n Common Errors\n </h3>\n <p class=\"error-analysis-description\">\n This section shows the most frequent error messages from failed actions, helping identify systemic issues that may need attention.\n </p>\n <div class=\"error-list\">\n <div class=\"error-item\" *ngFor=\"let error of getTopErrors()\">\n <span class=\"error-count\">{{ error.count }}x</span>\n <span class=\"error-message\">{{ error.message }}</span>\n </div>\n </div>\n </div>\n <div class=\"no-errors\" *ngIf=\"actionMetrics.errorAnalysis.size === 0\">\n <i class=\"fas fa-check-circle\"></i>\n <p>No action errors detected in this run. All actions completed successfully!</p>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Model Performance Comparison -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-chart-line\"></i> Model Performance Comparison\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n\n <div class=\"model-comparison\">\n <table>\n <thead>\n <tr>\n <th>Model</th>\n <th>Vendor</th>\n <th>Prompts</th>\n <th>Avg Time</th>\n <th>Total Cost</th>\n <th>Avg Cost/Prompt</th>\n <th>Input Tokens</th>\n <th>Output Tokens</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let model of getModelPerformanceData()\">\n <td>{{ model.name }}</td>\n <td>{{ model.vendor }}</td>\n <td>{{ model.count }}</td>\n <td>{{ formatDuration(model.avgTime) }}</td>\n <td>{{ formatCost(model.totalCost) }}</td>\n <td>{{ formatCost(model.avgCost) }}</td>\n <td>{{ model.inputTokens | number:'1.0-0' }}</td>\n <td>{{ model.outputTokens | number:'1.0-0' }}</td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n\n <!-- Timeline Analysis -->\n <kendo-panelbar-item [expanded]=\"true\">\n <ng-template kendoPanelBarItemTitle>\n <i class=\"fas fa-stream\"></i> Execution Timeline Analysis\n </ng-template>\n <ng-template kendoPanelBarContent>\n <div class=\"analytics-panel\">\n\n <div class=\"timeline-stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Total Steps</span>\n <span class=\"stat-value\">{{ timelineMetrics.totalSteps }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parallel Executions</span>\n <span class=\"stat-value\">{{ timelineMetrics.parallelExecutions }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Max Nesting Depth</span>\n <span class=\"stat-value\">{{ timelineMetrics.deepestNesting }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Sub-Agent Runs</span>\n <span class=\"stat-value\">{{ subAgentRuns.length }}</span>\n </div>\n </div>\n\n <div class=\"step-breakdown\">\n <h3>Steps by Type</h3>\n <div class=\"step-type-list\">\n <div class=\"step-type-item\" *ngFor=\"let type of timelineMetrics.stepsByType | keyvalue\">\n <i class=\"fas\" [ngClass]=\"getStepTypeIcon(type.key)\"></i>\n <span class=\"type-name\">{{ type.key }}</span>\n <span class=\"type-count\">{{ type.value }}</span>\n <span class=\"type-percentage\">({{ (type.value / timelineMetrics.totalSteps * 100).toFixed(1) }}%)</span>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n</div>", styles: [".analytics-container {\n padding: 20px;\n height: 100%;\n overflow-y: auto;\n background-color: #f8f9fa;\n}\n\n/* Loading and Error States */\n.loading-state,\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 300px;\n color: #6c757d;\n}\n\n.loading-state i,\n.error-state i {\n margin-bottom: 15px;\n}\n\n.error-state {\n color: #dc3545;\n}\n\n/* Summary Cards */\n.summary-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.summary-card {\n background: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.summary-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.card-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 20px;\n font-size: 24px;\n color: white;\n}\n\n.card-icon.prompts {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.card-icon.actions {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n}\n\n.card-icon.cost {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n}\n\n.card-icon.time {\n background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n}\n\n.card-content h3 {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.metric-value {\n font-size: 28px;\n font-weight: 700;\n color: #212529;\n margin-bottom: 4px;\n}\n\n.metric-detail {\n font-size: 13px;\n color: #6c757d;\n}\n\n.metric-detail .success {\n color: #28a745;\n margin-right: 10px;\n}\n\n.metric-detail .failed {\n color: #dc3545;\n}\n\n/* Analytics Panels */\n.analytics-panel {\n padding: 15px;\n}\n\n/* Kendo PanelBar Styling - Copied from AI Agent Form */\n::ng-deep .analytics-content .k-panelbar {\n border: none;\n background: transparent;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item {\n border: none;\n border-radius: 12px;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n background: white;\n overflow: hidden;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header {\n background: white;\n border: none;\n padding: 16px 20px;\n border-radius: 12px 12px 0 0;\n color: #2c3e50;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header:hover {\n background: #f8f9fa;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n background: #2196f3;\n color: white;\n border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n position: absolute;\n right: 24px;\n color: inherit;\n font-size: 14px;\n transition: transform 0.2s ease;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n transform: rotate(180deg);\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n content: '\\f107';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n}\n\n::ng-deep .analytics-content .k-panelbar > .k-panelbar-item > .k-content {\n padding: 0;\n border: none;\n background: white;\n border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-header .k-panelbar-icon {\n font-size: 18px;\n color: #2196f3;\n margin-right: 8px;\n}\n\n::ng-deep .analytics-content .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n color: white;\n}\n\n/* Charts */\n.charts-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 20px;\n margin-bottom: 20px;\n}\n\n/* Chart Cards */\n.chart-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.chart-card.expanded {\n grid-column: 1 / -1;\n}\n\n.chart-card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background-color: #f8f9fa;\n border-bottom: 1px solid #e9ecef;\n cursor: pointer;\n user-select: none;\n}\n\n.chart-card-header:hover {\n background-color: #e9ecef;\n}\n\n.chart-card-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.chart-card-header h3 i {\n font-size: 16px;\n color: #6c757d;\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: #6c757d;\n transition: color 0.2s;\n}\n\n.expand-btn:hover {\n color: #495057;\n}\n\n.chart-card-body {\n padding: 16px;\n background: white;\n}\n\n.chart-card.expanded .chart-card-body {\n padding: 24px;\n}\n\n.chart-card.expanded .chart-container > div {\n min-height: 400px;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 16px;\n}\n\n.view-mode-toggle button {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.chart-container {\n position: relative;\n}\n\n.chart-container h3 {\n margin: 0 0 10px 0;\n font-size: 15px;\n font-weight: 500;\n color: #495057;\n}\n\n.chart-container > div {\n min-height: 220px;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n/* Ensure SVG charts are centered */\n.chart-container svg {\n display: block;\n margin: 0 auto;\n}\n\n.chart-legend {\n margin-top: 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n font-size: 12px;\n}\n\n.legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n}\n\n.legend-color {\n width: 16px;\n height: 16px;\n border-radius: 3px;\n}\n\n.chart-total {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n/* Detailed Metrics */\n.detailed-metrics {\n margin-top: 20px;\n border-top: 1px solid #e9ecef;\n padding-top: 20px;\n}\n\n.detailed-metrics button {\n margin-bottom: 15px;\n}\n\n.detailed-metrics button i {\n margin-right: 8px;\n}\n\n.metrics-table {\n overflow-x: auto;\n}\n\n.metrics-table table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.metrics-table th {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n}\n\n.metrics-table td {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.metrics-table tr:hover {\n background-color: #f8f9fa;\n}\n\n.success-rate {\n font-weight: 500;\n}\n\n.success-rate.high {\n color: #28a745;\n}\n\n.success-rate.medium {\n color: #ffc107;\n}\n\n.success-rate.low {\n color: #dc3545;\n}\n\n/* Error Analysis */\n.error-analysis {\n margin-top: 30px;\n padding: 20px;\n background-color: #fff5f5;\n border-radius: 8px;\n border: 1px solid #f5c6cb;\n}\n\n.error-analysis h3 {\n margin: 0 0 15px 0;\n color: #721c24;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.error-analysis-description {\n font-size: 14px;\n color: #856404;\n margin-bottom: 20px;\n line-height: 1.5;\n}\n\n.error-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.error-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 10px;\n background-color: white;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.error-count {\n background-color: #dc3545;\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.error-message {\n flex: 1;\n color: #495057;\n}\n\n/* No errors state */\n.no-errors {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background-color: #d4edda;\n border-radius: 8px;\n border: 1px solid #c3e6cb;\n color: #155724;\n}\n\n.no-errors i {\n font-size: 24px;\n color: #28a745;\n}\n\n.no-errors p {\n margin: 0;\n font-size: 14px;\n}\n\n/* No data message */\n.no-data-message {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.no-data-message i {\n font-size: 48px;\n margin-bottom: 20px;\n color: #dee2e6;\n}\n\n.no-data-message p {\n margin: 0 0 10px 0;\n font-size: 16px;\n}\n\n.no-data-message p.small {\n font-size: 14px;\n color: #adb5bd;\n}\n\n/* Model Comparison Table */\n.model-comparison {\n overflow-x: auto;\n}\n\n.model-comparison table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.model-comparison th {\n background-color: #f8f9fa;\n padding: 12px;\n text-align: left;\n font-weight: 600;\n color: #495057;\n border-bottom: 2px solid #dee2e6;\n white-space: nowrap;\n}\n\n.model-comparison td {\n padding: 12px;\n border-bottom: 1px solid #dee2e6;\n}\n\n.model-comparison tr:hover {\n background-color: #f8f9fa;\n}\n\n/* Timeline Analysis */\n.timeline-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 8px;\n}\n\n.stat-label {\n font-size: 14px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.stat-value {\n font-size: 32px;\n font-weight: 700;\n color: #212529;\n}\n\n.step-breakdown h3 {\n margin: 0 0 15px 0;\n font-size: 16px;\n font-weight: 500;\n color: #495057;\n}\n\n.step-type-list {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n}\n\n.step-type-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n background-color: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.step-type-item i {\n width: 30px;\n text-align: center;\n color: #6c757d;\n}\n\n.type-name {\n flex: 1;\n font-weight: 500;\n}\n\n.type-count {\n font-weight: 700;\n color: #212529;\n}\n\n.type-percentage {\n font-size: 13px;\n color: #6c757d;\n margin-left: 5px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .summary-cards {\n grid-template-columns: 1fr;\n }\n \n .charts-grid {\n grid-template-columns: 1fr;\n }\n \n .timeline-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}"] }]
2071
2073
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIAgentRunCostService }], { agentRunId: [{
2072
2074
  type: Input
2073
2075
  }], modelDistributionChart: [{