@memberjunction/ng-core-entity-forms 2.74.0 → 2.75.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 (26) hide show
  1. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts +11 -6
  2. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.d.ts.map +1 -1
  3. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +456 -447
  4. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  5. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.d.ts +35 -7
  6. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.d.ts.map +1 -1
  7. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +75 -61
  8. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js.map +1 -1
  9. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.d.ts +37 -0
  10. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.d.ts.map +1 -0
  11. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.js +117 -0
  12. package/dist/lib/custom/ai-agent-run/ai-agent-run-cost.service.js.map +1 -0
  13. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.d.ts.map +1 -1
  14. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js +0 -8
  15. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js.map +1 -1
  16. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.d.ts.map +1 -1
  17. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +0 -26
  18. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js.map +1 -1
  19. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts +5 -1
  20. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.d.ts.map +1 -1
  21. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +160 -103
  22. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js.map +1 -1
  23. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.d.ts.map +1 -1
  24. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js +15 -4
  25. package/dist/lib/generated/Entities/AIPromptRun/sections/details.component.js.map +1 -1
  26. package/package.json +16 -16
package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js CHANGED
@@ -18,13 +18,14 @@ import { AIAgentRunAnalyticsComponent } from './ai-agent-run-analytics.component
18
18
  import * as i0 from "@angular/core";
19
19
  import * as i1 from "@memberjunction/ng-shared";
20
20
  import * as i2 from "@angular/router";
21
- import * as i3 from "@angular/common";
22
- import * as i4 from "@angular/forms";
23
- import * as i5 from "@progress/kendo-angular-layout";
24
- import * as i6 from "@memberjunction/ng-code-editor";
25
- import * as i7 from "@memberjunction/ng-deep-diff";
26
- import * as i8 from "./ai-agent-run-timeline.component";
27
- import * as i9 from "./ai-agent-run-analytics.component";
21
+ import * as i3 from "./ai-agent-run-cost.service";
22
+ import * as i4 from "@angular/common";
23
+ import * as i5 from "@angular/forms";
24
+ import * as i6 from "@progress/kendo-angular-layout";
25
+ import * as i7 from "@memberjunction/ng-code-editor";
26
+ import * as i8 from "@memberjunction/ng-deep-diff";
27
+ import * as i9 from "./ai-agent-run-timeline.component";
28
+ import * as i10 from "./ai-agent-run-analytics.component";
28
29
  function AIAgentRunFormComponentExtended_span_11_Template(rf, ctx) { if (rf & 1) {
29
30
  i0.ɵɵelementStart(0, "span", 32);
30
31
  i0.ɵɵtext(1);
@@ -82,50 +83,80 @@ function AIAgentRunFormComponentExtended_div_31_Template(rf, ctx) { if (rf & 1)
82
83
  i0.ɵɵadvance();
83
84
  i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Success ? "Success" : "Failed", " ");
84
85
  } }
86
+ function AIAgentRunFormComponentExtended_div_32_span_3_Template(rf, ctx) { if (rf & 1) {
87
+ i0.ɵɵelementStart(0, "span", 22);
88
+ i0.ɵɵtext(1);
89
+ i0.ɵɵpipe(2, "number");
90
+ i0.ɵɵelementEnd();
91
+ } if (rf & 2) {
92
+ const ctx_r0 = i0.ɵɵnextContext(2);
93
+ i0.ɵɵadvance();
94
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalTokensInput + ctx_r0.costMetrics.totalTokensOutput, "1.0-0"));
95
+ } }
96
+ function AIAgentRunFormComponentExtended_div_32_span_4_Template(rf, ctx) { if (rf & 1) {
97
+ i0.ɵɵelementStart(0, "span", 38);
98
+ i0.ɵɵelement(1, "i", 39);
99
+ i0.ɵɵelementEnd();
100
+ } }
85
101
  function AIAgentRunFormComponentExtended_div_32_Template(rf, ctx) { if (rf & 1) {
86
102
  i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
87
103
  i0.ɵɵtext(2, "Tokens");
88
104
  i0.ɵɵelementEnd();
89
- i0.ɵɵelementStart(3, "span", 22);
90
- i0.ɵɵtext(4);
91
- i0.ɵɵpipe(5, "number");
92
- i0.ɵɵelementEnd()();
105
+ i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_32_span_3_Template, 3, 4, "span", 36)(4, AIAgentRunFormComponentExtended_div_32_span_4_Template, 2, 0, "span", 37);
106
+ i0.ɵɵelementEnd();
93
107
  } if (rf & 2) {
94
108
  const ctx_r0 = i0.ɵɵnextContext();
95
- i0.ɵɵadvance(4);
96
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r0.record.TotalTokensUsed, "1.0-0"));
109
+ i0.ɵɵadvance(3);
110
+ i0.ɵɵproperty("ngIf", !ctx_r0.costMetrics.isLoading);
111
+ i0.ɵɵadvance();
112
+ i0.ɵɵproperty("ngIf", ctx_r0.costMetrics.isLoading);
113
+ } }
114
+ function AIAgentRunFormComponentExtended_div_33_span_3_Template(rf, ctx) { if (rf & 1) {
115
+ i0.ɵɵelementStart(0, "span", 22);
116
+ i0.ɵɵtext(1);
117
+ i0.ɵɵpipe(2, "number");
118
+ i0.ɵɵelementEnd();
119
+ } if (rf & 2) {
120
+ const ctx_r0 = i0.ɵɵnextContext(2);
121
+ i0.ɵɵadvance();
122
+ i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalCost, "1.2-4"), "");
123
+ } }
124
+ function AIAgentRunFormComponentExtended_div_33_span_4_Template(rf, ctx) { if (rf & 1) {
125
+ i0.ɵɵelementStart(0, "span", 38);
126
+ i0.ɵɵelement(1, "i", 39);
127
+ i0.ɵɵelementEnd();
97
128
  } }
98
129
  function AIAgentRunFormComponentExtended_div_33_Template(rf, ctx) { if (rf & 1) {
99
130
  i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
100
131
  i0.ɵɵtext(2, "Cost");
101
132
  i0.ɵɵelementEnd();
102
- i0.ɵɵelementStart(3, "span", 22);
103
- i0.ɵɵtext(4);
104
- i0.ɵɵpipe(5, "number");
105
- i0.ɵɵelementEnd()();
133
+ i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_33_span_3_Template, 3, 4, "span", 36)(4, AIAgentRunFormComponentExtended_div_33_span_4_Template, 2, 0, "span", 37);
134
+ i0.ɵɵelementEnd();
106
135
  } if (rf & 2) {
107
136
  const ctx_r0 = i0.ɵɵnextContext();
108
- i0.ɵɵadvance(4);
109
- i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(5, 1, ctx_r0.record.TotalCost, "1.2-4"), "");
137
+ i0.ɵɵadvance(3);
138
+ i0.ɵɵproperty("ngIf", !ctx_r0.costMetrics.isLoading);
139
+ i0.ɵɵadvance();
140
+ i0.ɵɵproperty("ngIf", ctx_r0.costMetrics.isLoading);
110
141
  } }
111
142
  function AIAgentRunFormComponentExtended_div_45_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
112
143
  const _r5 = i0.ɵɵgetCurrentView();
113
- i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
144
+ i0.ɵɵelementStart(0, "div", 59)(1, "button", 60);
114
145
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_45_div_5_div_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.navigateToActionLog(ctx_r0.selectedTimelineItem.data.ID)); });
115
- i0.ɵɵelement(2, "i", 57);
146
+ i0.ɵɵelement(2, "i", 61);
116
147
  i0.ɵɵtext(3, " View Action Execution Log ");
117
148
  i0.ɵɵelementEnd()();
118
149
  } }
119
150
  function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template(rf, ctx) { if (rf & 1) {
120
151
  const _r6 = i0.ɵɵgetCurrentView();
121
- i0.ɵɵelementStart(0, "div", 51)(1, "button", 58);
152
+ i0.ɵɵelementStart(0, "div", 55)(1, "button", 62);
122
153
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.detailPaneTab = "diff"); });
123
- i0.ɵɵelement(2, "i", 59);
154
+ i0.ɵɵelement(2, "i", 63);
124
155
  i0.ɵɵtext(3, " Payload Changes ");
125
156
  i0.ɵɵelementEnd();
126
- i0.ɵɵelementStart(4, "button", 58);
157
+ i0.ɵɵelementStart(4, "button", 62);
127
158
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.detailPaneTab = "json"); });
128
- i0.ɵɵelement(5, "i", 60);
159
+ i0.ɵɵelement(5, "i", 64);
129
160
  i0.ɵɵtext(6, " Full JSON ");
130
161
  i0.ɵɵelementEnd()();
131
162
  } if (rf & 2) {
@@ -136,8 +167,8 @@ function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template(rf
136
167
  i0.ɵɵclassProp("active", ctx_r0.detailPaneTab === "json");
137
168
  } }
138
169
  function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_27_Template(rf, ctx) { if (rf & 1) {
139
- i0.ɵɵelementStart(0, "div", 53);
140
- i0.ɵɵelement(1, "mj-deep-diff", 61);
170
+ i0.ɵɵelementStart(0, "div", 57);
171
+ i0.ɵɵelement(1, "mj-deep-diff", 65);
141
172
  i0.ɵɵelementEnd();
142
173
  } if (rf & 2) {
143
174
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -146,11 +177,11 @@ function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_27_Template(rf
146
177
  } }
147
178
  function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template(rf, ctx) { if (rf & 1) {
148
179
  const _r7 = i0.ɵɵgetCurrentView();
149
- i0.ɵɵelementStart(0, "div", 54)(1, "div", 62)(2, "button", 63);
180
+ i0.ɵɵelementStart(0, "div", 58)(1, "div", 66)(2, "button", 67);
150
181
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.getSelectedItemJson())); });
151
- i0.ɵɵelement(3, "i", 64);
182
+ i0.ɵɵelement(3, "i", 68);
152
183
  i0.ɵɵelementEnd()();
153
- i0.ɵɵelementStart(4, "mj-code-editor", 65);
184
+ i0.ɵɵelementStart(4, "mj-code-editor", 69);
154
185
  i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template_mj_code_editor_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedItemJsonString, $event) || (ctx_r0.selectedItemJsonString = $event); return i0.ɵɵresetView($event); });
155
186
  i0.ɵɵelementEnd()();
156
187
  } if (rf & 2) {
@@ -161,35 +192,35 @@ function AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template(rf
161
192
  } }
162
193
  function AIAgentRunFormComponentExtended_div_45_div_5_Template(rf, ctx) { if (rf & 1) {
163
194
  const _r4 = i0.ɵɵgetCurrentView();
164
- i0.ɵɵelementStart(0, "div", 42)(1, "div", 43)(2, "h3");
195
+ i0.ɵɵelementStart(0, "div", 46)(1, "div", 47)(2, "h3");
165
196
  i0.ɵɵelement(3, "i", 15);
166
197
  i0.ɵɵtext(4);
167
198
  i0.ɵɵelementEnd();
168
- i0.ɵɵelementStart(5, "button", 44);
199
+ i0.ɵɵelementStart(5, "button", 48);
169
200
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_45_div_5_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); });
170
- i0.ɵɵelement(6, "i", 45);
201
+ i0.ɵɵelement(6, "i", 49);
171
202
  i0.ɵɵelementEnd()();
172
- i0.ɵɵelementStart(7, "div", 46)(8, "div", 47)(9, "div", 48)(10, "label");
203
+ i0.ɵɵelementStart(7, "div", 50)(8, "div", 51)(9, "div", 52)(10, "label");
173
204
  i0.ɵɵtext(11, "Type");
174
205
  i0.ɵɵelementEnd();
175
206
  i0.ɵɵelementStart(12, "span");
176
207
  i0.ɵɵtext(13);
177
208
  i0.ɵɵelementEnd()();
178
- i0.ɵɵelementStart(14, "div", 48)(15, "label");
209
+ i0.ɵɵelementStart(14, "div", 52)(15, "label");
179
210
  i0.ɵɵtext(16, "Status");
180
211
  i0.ɵɵelementEnd();
181
- i0.ɵɵelementStart(17, "span", 49);
212
+ i0.ɵɵelementStart(17, "span", 53);
182
213
  i0.ɵɵtext(18);
183
214
  i0.ɵɵelementEnd()();
184
- i0.ɵɵelementStart(19, "div", 48)(20, "label");
215
+ i0.ɵɵelementStart(19, "div", 52)(20, "label");
185
216
  i0.ɵɵtext(21, "Duration");
186
217
  i0.ɵɵelementEnd();
187
218
  i0.ɵɵelementStart(22, "span");
188
219
  i0.ɵɵtext(23);
189
220
  i0.ɵɵelementEnd()()();
190
- i0.ɵɵtemplate(24, AIAgentRunFormComponentExtended_div_45_div_5_div_24_Template, 4, 0, "div", 50)(25, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template, 7, 4, "div", 51);
191
- i0.ɵɵelementStart(26, "div", 52);
192
- i0.ɵɵtemplate(27, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_27_Template, 2, 9, "div", 53)(28, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template, 5, 3, "div", 54);
221
+ i0.ɵɵtemplate(24, AIAgentRunFormComponentExtended_div_45_div_5_div_24_Template, 4, 0, "div", 54)(25, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_25_Template, 7, 4, "div", 55);
222
+ i0.ɵɵelementStart(26, "div", 56);
223
+ i0.ɵɵtemplate(27, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_27_Template, 2, 9, "div", 57)(28, AIAgentRunFormComponentExtended_div_45_div_5_Conditional_28_Template, 5, 3, "div", 58);
193
224
  i0.ɵɵelementEnd()()();
194
225
  } if (rf & 2) {
195
226
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -218,11 +249,11 @@ function AIAgentRunFormComponentExtended_div_45_div_5_Template(rf, ctx) { if (rf
218
249
  } }
219
250
  function AIAgentRunFormComponentExtended_div_45_Template(rf, ctx) { if (rf & 1) {
220
251
  const _r3 = i0.ɵɵgetCurrentView();
221
- i0.ɵɵelementStart(0, "div", 36)(1, "kendo-splitter", 37)(2, "kendo-splitter-pane", 38)(3, "mj-ai-agent-run-timeline", 39);
252
+ i0.ɵɵelementStart(0, "div", 40)(1, "kendo-splitter", 41)(2, "kendo-splitter-pane", 42)(3, "mj-ai-agent-run-timeline", 43);
222
253
  i0.ɵɵlistener("itemSelected", function AIAgentRunFormComponentExtended_div_45_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function AIAgentRunFormComponentExtended_div_45_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
223
254
  i0.ɵɵelementEnd()();
224
- i0.ɵɵelementStart(4, "kendo-splitter-pane", 40);
225
- i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_45_div_5_Template, 29, 12, "div", 41);
255
+ i0.ɵɵelementStart(4, "kendo-splitter-pane", 44);
256
+ i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_45_div_5_Template, 29, 12, "div", 45);
226
257
  i0.ɵɵelementEnd()()();
227
258
  } if (rf & 2) {
228
259
  const ctx_r0 = i0.ɵɵnextContext();
@@ -236,14 +267,14 @@ function AIAgentRunFormComponentExtended_div_45_Template(rf, ctx) { if (rf & 1)
236
267
  i0.ɵɵproperty("ngIf", ctx_r0.selectedTimelineItem);
237
268
  } }
238
269
  function AIAgentRunFormComponentExtended_div_46_mj_ai_agent_run_analytics_1_Template(rf, ctx) { if (rf & 1) {
239
- i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 67, 0);
270
+ i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 71, 0);
240
271
  } if (rf & 2) {
241
272
  const ctx_r0 = i0.ɵɵnextContext(2);
242
273
  i0.ɵɵproperty("agentRunId", ctx_r0.record.ID);
243
274
  } }
244
275
  function AIAgentRunFormComponentExtended_div_46_Template(rf, ctx) { if (rf & 1) {
245
- i0.ɵɵelementStart(0, "div", 36);
246
- i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_46_mj_ai_agent_run_analytics_1_Template, 2, 1, "mj-ai-agent-run-analytics", 66);
276
+ i0.ɵɵelementStart(0, "div", 40);
277
+ i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_46_mj_ai_agent_run_analytics_1_Template, 2, 1, "mj-ai-agent-run-analytics", 70);
247
278
  i0.ɵɵelementEnd();
248
279
  } if (rf & 2) {
249
280
  const ctx_r0 = i0.ɵɵnextContext();
@@ -252,7 +283,7 @@ function AIAgentRunFormComponentExtended_div_46_Template(rf, ctx) { if (rf & 1)
252
283
  } }
253
284
  function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_11_Template(rf, ctx) { if (rf & 1) {
254
285
  const _r9 = i0.ɵɵgetCurrentView();
255
- i0.ɵɵelementStart(0, "a", 79);
286
+ i0.ɵɵelementStart(0, "a", 83);
256
287
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_11_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.ParentRunID)); });
257
288
  i0.ɵɵtext(1);
258
289
  i0.ɵɵelementEnd();
@@ -268,7 +299,7 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_3_span_12_Template(r
268
299
  } }
269
300
  function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_17_Template(rf, ctx) { if (rf & 1) {
270
301
  const _r10 = i0.ɵɵgetCurrentView();
271
- i0.ɵɵelementStart(0, "a", 79);
302
+ i0.ɵɵelementStart(0, "a", 83);
272
303
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_17_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.LastRunID)); });
273
304
  i0.ɵɵtext(1);
274
305
  i0.ɵɵelementEnd();
@@ -284,7 +315,7 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_3_span_18_Template(r
284
315
  } }
285
316
  function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_23_Template(rf, ctx) { if (rf & 1) {
286
317
  const _r11 = i0.ɵɵgetCurrentView();
287
- i0.ɵɵelementStart(0, "a", 79);
318
+ i0.ɵɵelementStart(0, "a", 83);
288
319
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_23_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Conversations", ctx_r0.record.ConversationID)); });
289
320
  i0.ɵɵtext(1);
290
321
  i0.ɵɵelementEnd();
@@ -300,7 +331,7 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_3_span_24_Template(r
300
331
  } }
301
332
  function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_29_Template(rf, ctx) { if (rf & 1) {
302
333
  const _r12 = i0.ɵɵgetCurrentView();
303
- i0.ɵɵelementStart(0, "a", 79);
334
+ i0.ɵɵelementStart(0, "a", 83);
304
335
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_47_ng_template_3_a_29_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Users", ctx_r0.record.UserID)); });
305
336
  i0.ɵɵtext(1);
306
337
  i0.ɵɵelementEnd();
@@ -316,36 +347,36 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_3_span_30_Template(r
316
347
  } }
317
348
  function AIAgentRunFormComponentExtended_div_47_ng_template_3_Template(rf, ctx) { if (rf & 1) {
318
349
  const _r8 = i0.ɵɵgetCurrentView();
319
- i0.ɵɵelementStart(0, "div", 77)(1, "div", 78)(2, "label");
350
+ i0.ɵɵelementStart(0, "div", 81)(1, "div", 82)(2, "label");
320
351
  i0.ɵɵtext(3, "Agent");
321
352
  i0.ɵɵelementEnd();
322
- i0.ɵɵelementStart(4, "span")(5, "a", 79);
353
+ i0.ɵɵelementStart(4, "span")(5, "a", 83);
323
354
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_47_ng_template_3_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Agents", ctx_r0.record.AgentID)); });
324
355
  i0.ɵɵtext(6);
325
356
  i0.ɵɵelementEnd()()();
326
- i0.ɵɵelementStart(7, "div", 78)(8, "label");
357
+ i0.ɵɵelementStart(7, "div", 82)(8, "label");
327
358
  i0.ɵɵtext(9, "Parent Run ID");
328
359
  i0.ɵɵelementEnd();
329
360
  i0.ɵɵelementStart(10, "span");
330
- i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_11_Template, 2, 1, "a", 80)(12, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_12_Template, 2, 0, "span", 81);
361
+ i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_11_Template, 2, 1, "a", 84)(12, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_12_Template, 2, 0, "span", 85);
331
362
  i0.ɵɵelementEnd()();
332
- i0.ɵɵelementStart(13, "div", 78)(14, "label");
363
+ i0.ɵɵelementStart(13, "div", 82)(14, "label");
333
364
  i0.ɵɵtext(15, "Last Run ID");
334
365
  i0.ɵɵelementEnd();
335
366
  i0.ɵɵelementStart(16, "span");
336
- i0.ɵɵtemplate(17, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_17_Template, 2, 1, "a", 80)(18, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_18_Template, 2, 0, "span", 81);
367
+ i0.ɵɵtemplate(17, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_17_Template, 2, 1, "a", 84)(18, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_18_Template, 2, 0, "span", 85);
337
368
  i0.ɵɵelementEnd()();
338
- i0.ɵɵelementStart(19, "div", 78)(20, "label");
369
+ i0.ɵɵelementStart(19, "div", 82)(20, "label");
339
370
  i0.ɵɵtext(21, "Conversation ID");
340
371
  i0.ɵɵelementEnd();
341
372
  i0.ɵɵelementStart(22, "span");
342
- i0.ɵɵtemplate(23, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_23_Template, 2, 1, "a", 80)(24, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_24_Template, 2, 0, "span", 81);
373
+ i0.ɵɵtemplate(23, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_23_Template, 2, 1, "a", 84)(24, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_24_Template, 2, 0, "span", 85);
343
374
  i0.ɵɵelementEnd()();
344
- i0.ɵɵelementStart(25, "div", 78)(26, "label");
375
+ i0.ɵɵelementStart(25, "div", 82)(26, "label");
345
376
  i0.ɵɵtext(27, "User");
346
377
  i0.ɵɵelementEnd();
347
378
  i0.ɵɵelementStart(28, "span");
348
- i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_29_Template, 2, 1, "a", 80)(30, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_30_Template, 2, 0, "span", 81);
379
+ i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_47_ng_template_3_a_29_Template, 2, 1, "a", 84)(30, AIAgentRunFormComponentExtended_div_47_ng_template_3_span_30_Template, 2, 0, "span", 85);
349
380
  i0.ɵɵelementEnd()()();
350
381
  } if (rf & 2) {
351
382
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -369,10 +400,10 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_3_Template(rf, ctx)
369
400
  i0.ɵɵproperty("ngIf", !ctx_r0.record.UserID);
370
401
  } }
371
402
  function AIAgentRunFormComponentExtended_div_47_ng_template_5_div_11_Template(rf, ctx) { if (rf & 1) {
372
- i0.ɵɵelementStart(0, "div", 83)(1, "label");
403
+ i0.ɵɵelementStart(0, "div", 87)(1, "label");
373
404
  i0.ɵɵtext(2, "Error Message");
374
405
  i0.ɵɵelementEnd();
375
- i0.ɵɵelementStart(3, "div", 84);
406
+ i0.ɵɵelementStart(3, "div", 88);
376
407
  i0.ɵɵtext(4);
377
408
  i0.ɵɵelementEnd()();
378
409
  } if (rf & 2) {
@@ -381,19 +412,19 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_5_div_11_Template(rf
381
412
  i0.ɵɵtextInterpolate(ctx_r0.record.ErrorMessage);
382
413
  } }
383
414
  function AIAgentRunFormComponentExtended_div_47_ng_template_5_Template(rf, ctx) { if (rf & 1) {
384
- i0.ɵɵelementStart(0, "div", 77)(1, "div", 78)(2, "label");
415
+ i0.ɵɵelementStart(0, "div", 81)(1, "div", 82)(2, "label");
385
416
  i0.ɵɵtext(3, "Status");
386
417
  i0.ɵɵelementEnd();
387
418
  i0.ɵɵelementStart(4, "span", 14);
388
419
  i0.ɵɵtext(5);
389
420
  i0.ɵɵelementEnd()();
390
- i0.ɵɵelementStart(6, "div", 78)(7, "label");
421
+ i0.ɵɵelementStart(6, "div", 82)(7, "label");
391
422
  i0.ɵɵtext(8, "Success");
392
423
  i0.ɵɵelementEnd();
393
424
  i0.ɵɵelementStart(9, "span");
394
425
  i0.ɵɵtext(10);
395
426
  i0.ɵɵelementEnd()();
396
- i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_47_ng_template_5_div_11_Template, 5, 1, "div", 82);
427
+ i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_47_ng_template_5_div_11_Template, 5, 1, "div", 86);
397
428
  i0.ɵɵelementEnd();
398
429
  } if (rf & 2) {
399
430
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -409,35 +440,35 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_5_Template(rf, ctx)
409
440
  i0.ɵɵproperty("ngIf", ctx_r0.record.ErrorMessage);
410
441
  } }
411
442
  function AIAgentRunFormComponentExtended_div_47_ng_template_7_Template(rf, ctx) { if (rf & 1) {
412
- i0.ɵɵelementStart(0, "div", 77)(1, "div", 78)(2, "label");
443
+ i0.ɵɵelementStart(0, "div", 81)(1, "div", 82)(2, "label");
413
444
  i0.ɵɵtext(3, "Total Tokens Used");
414
445
  i0.ɵɵelementEnd();
415
446
  i0.ɵɵelementStart(4, "span");
416
447
  i0.ɵɵtext(5);
417
448
  i0.ɵɵpipe(6, "number");
418
449
  i0.ɵɵelementEnd()();
419
- i0.ɵɵelementStart(7, "div", 78)(8, "label");
450
+ i0.ɵɵelementStart(7, "div", 82)(8, "label");
420
451
  i0.ɵɵtext(9, "Prompt Tokens");
421
452
  i0.ɵɵelementEnd();
422
453
  i0.ɵɵelementStart(10, "span");
423
454
  i0.ɵɵtext(11);
424
455
  i0.ɵɵpipe(12, "number");
425
456
  i0.ɵɵelementEnd()();
426
- i0.ɵɵelementStart(13, "div", 78)(14, "label");
457
+ i0.ɵɵelementStart(13, "div", 82)(14, "label");
427
458
  i0.ɵɵtext(15, "Completion Tokens");
428
459
  i0.ɵɵelementEnd();
429
460
  i0.ɵɵelementStart(16, "span");
430
461
  i0.ɵɵtext(17);
431
462
  i0.ɵɵpipe(18, "number");
432
463
  i0.ɵɵelementEnd()();
433
- i0.ɵɵelementStart(19, "div", 78)(20, "label");
464
+ i0.ɵɵelementStart(19, "div", 82)(20, "label");
434
465
  i0.ɵɵtext(21, "Total Cost");
435
466
  i0.ɵɵelementEnd();
436
467
  i0.ɵɵelementStart(22, "span");
437
468
  i0.ɵɵtext(23);
438
469
  i0.ɵɵpipe(24, "number");
439
470
  i0.ɵɵelementEnd()();
440
- i0.ɵɵelementStart(25, "div", 78)(26, "label");
471
+ i0.ɵɵelementStart(25, "div", 82)(26, "label");
441
472
  i0.ɵɵtext(27, "Total Prompt Iterations");
442
473
  i0.ɵɵelementEnd();
443
474
  i0.ɵɵelementStart(28, "span");
@@ -458,8 +489,8 @@ function AIAgentRunFormComponentExtended_div_47_ng_template_7_Template(rf, ctx)
458
489
  i0.ɵɵtextInterpolate(ctx_r0.record.TotalPromptIterations != null ? i0.ɵɵpipeBind2(30, 17, ctx_r0.record.TotalPromptIterations, "1.0-0") : "N/A");
459
490
  } }
460
491
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
461
- i0.ɵɵelementStart(0, "div", 86);
462
- i0.ɵɵelement(1, "mj-code-editor", 87);
492
+ i0.ɵɵelementStart(0, "div", 90);
493
+ i0.ɵɵelement(1, "mj-code-editor", 91);
463
494
  i0.ɵɵelementEnd();
464
495
  } if (rf & 2) {
465
496
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -467,13 +498,13 @@ function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_ng_templat
467
498
  i0.ɵɵproperty("ngModel", ctx_r0.parsedResult)("language", "json")("readonly", true);
468
499
  } }
469
500
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_Template(rf, ctx) { if (rf & 1) {
470
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 85);
471
- i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_ng_template_1_Template, 2, 3, "ng-template", 70);
501
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 89);
502
+ i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_ng_template_1_Template, 2, 3, "ng-template", 74);
472
503
  i0.ɵɵelementEnd();
473
504
  } }
474
505
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
475
- i0.ɵɵelementStart(0, "div", 86);
476
- i0.ɵɵelement(1, "mj-code-editor", 87);
506
+ i0.ɵɵelementStart(0, "div", 90);
507
+ i0.ɵɵelement(1, "mj-code-editor", 91);
477
508
  i0.ɵɵelementEnd();
478
509
  } if (rf & 2) {
479
510
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -481,13 +512,13 @@ function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_ng_templat
481
512
  i0.ɵɵproperty("ngModel", ctx_r0.parsedStartingPayload)("language", "json")("readonly", true);
482
513
  } }
483
514
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_Template(rf, ctx) { if (rf & 1) {
484
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 88);
485
- i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_ng_template_1_Template, 2, 3, "ng-template", 70);
515
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 92);
516
+ i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_ng_template_1_Template, 2, 3, "ng-template", 74);
486
517
  i0.ɵɵelementEnd();
487
518
  } }
488
519
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
489
- i0.ɵɵelementStart(0, "div", 86);
490
- i0.ɵɵelement(1, "mj-code-editor", 87);
520
+ i0.ɵɵelementStart(0, "div", 90);
521
+ i0.ɵɵelement(1, "mj-code-editor", 91);
491
522
  i0.ɵɵelementEnd();
492
523
  } if (rf & 2) {
493
524
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -495,13 +526,13 @@ function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_ng_templa
495
526
  i0.ɵɵproperty("ngModel", ctx_r0.parsedFinalPayload)("language", "json")("readonly", true);
496
527
  } }
497
528
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_Template(rf, ctx) { if (rf & 1) {
498
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 89);
499
- i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_ng_template_1_Template, 2, 3, "ng-template", 70);
529
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 93);
530
+ i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_ng_template_1_Template, 2, 3, "ng-template", 74);
500
531
  i0.ɵɵelementEnd();
501
532
  } }
502
533
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
503
- i0.ɵɵelementStart(0, "div", 91);
504
- i0.ɵɵelement(1, "mj-deep-diff", 61);
534
+ i0.ɵɵelementStart(0, "div", 95);
535
+ i0.ɵɵelement(1, "mj-deep-diff", 65);
505
536
  i0.ɵɵelementEnd();
506
537
  } if (rf & 2) {
507
538
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -509,21 +540,21 @@ function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_ng_templa
509
540
  i0.ɵɵproperty("oldValue", ctx_r0.startingPayloadObject)("newValue", ctx_r0.finalPayloadObject)("title", "")("showSummary", true)("showUnchanged", false)("expandAll", false)("maxDepth", 10)("maxStringLength", 200)("treatNullAsUndefined", true);
510
541
  } }
511
542
  function AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_Template(rf, ctx) { if (rf & 1) {
512
- i0.ɵɵelementStart(0, "kendo-panelbar-item", 90);
513
- i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_ng_template_1_Template, 2, 9, "ng-template", 70);
543
+ i0.ɵɵelementStart(0, "kendo-panelbar-item", 94);
544
+ i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_ng_template_1_Template, 2, 9, "ng-template", 74);
514
545
  i0.ɵɵelementEnd();
515
546
  } }
516
547
  function AIAgentRunFormComponentExtended_div_47_Template(rf, ctx) { if (rf & 1) {
517
- i0.ɵɵelementStart(0, "div", 68)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 69);
518
- i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_47_ng_template_3_Template, 31, 9, "ng-template", 70);
548
+ i0.ɵɵelementStart(0, "div", 72)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 73);
549
+ i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_47_ng_template_3_Template, 31, 9, "ng-template", 74);
519
550
  i0.ɵɵelementEnd();
520
- i0.ɵɵelementStart(4, "kendo-panelbar-item", 71);
521
- i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_47_ng_template_5_Template, 12, 8, "ng-template", 70);
551
+ i0.ɵɵelementStart(4, "kendo-panelbar-item", 75);
552
+ i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_47_ng_template_5_Template, 12, 8, "ng-template", 74);
522
553
  i0.ɵɵelementEnd();
523
- i0.ɵɵelementStart(6, "kendo-panelbar-item", 72);
524
- i0.ɵɵtemplate(7, AIAgentRunFormComponentExtended_div_47_ng_template_7_Template, 31, 20, "ng-template", 70);
554
+ i0.ɵɵelementStart(6, "kendo-panelbar-item", 76);
555
+ i0.ɵɵtemplate(7, AIAgentRunFormComponentExtended_div_47_ng_template_7_Template, 31, 20, "ng-template", 74);
525
556
  i0.ɵɵelementEnd();
526
- i0.ɵɵtemplate(8, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_Template, 2, 0, "kendo-panelbar-item", 73)(9, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_Template, 2, 0, "kendo-panelbar-item", 74)(10, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_Template, 2, 0, "kendo-panelbar-item", 75)(11, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_Template, 2, 0, "kendo-panelbar-item", 76);
557
+ i0.ɵɵtemplate(8, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_8_Template, 2, 0, "kendo-panelbar-item", 77)(9, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_9_Template, 2, 0, "kendo-panelbar-item", 78)(10, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_10_Template, 2, 0, "kendo-panelbar-item", 79)(11, AIAgentRunFormComponentExtended_div_47_kendo_panelbar_item_11_Template, 2, 0, "kendo-panelbar-item", 80);
527
558
  i0.ɵɵelementEnd()();
528
559
  } if (rf & 2) {
529
560
  const ctx_r0 = i0.ɵɵnextContext();
@@ -539,9 +570,10 @@ function AIAgentRunFormComponentExtended_div_47_Template(rf, ctx) { if (rf & 1)
539
570
  i0.ɵɵproperty("ngIf", ctx_r0.showPayloadDiff);
540
571
  } }
541
572
  let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended extends AIAgentRunFormComponent {
542
- constructor(elementRef, sharedService, router, route, cdr) {
573
+ constructor(elementRef, sharedService, router, route, cdr, costService) {
543
574
  super(elementRef, sharedService, router, route, cdr);
544
575
  this.router = router;
576
+ this.costService = costService;
545
577
  this.destroy$ = new Subject();
546
578
  // UI state
547
579
  this.activeTab = 'timeline';
@@ -553,11 +585,14 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
553
585
  this.detailPaneTab = 'diff';
554
586
  this.analyticsLoaded = false;
555
587
  this.agent = null;
588
+ // Cost metrics using shared service
589
+ this.costMetrics = null;
556
590
  }
557
591
  async ngOnInit() {
558
592
  await super.ngOnInit();
559
593
  if (this.record) {
560
594
  await this.loadAgent();
595
+ await this.loadCostMetrics();
561
596
  }
562
597
  }
563
598
  ngOnDestroy() {
@@ -578,6 +613,25 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
578
613
  console.error('Error loading agent:', error);
579
614
  }
580
615
  }
616
+ async loadCostMetrics() {
617
+ if (!this.record?.ID)
618
+ return;
619
+ try {
620
+ this.costMetrics = await this.costService.getAgentRunCostMetrics(this.record.ID);
621
+ this.cdr.detectChanges();
622
+ }
623
+ catch (error) {
624
+ console.error('Error loading cost metrics:', error);
625
+ this.costMetrics = {
626
+ totalCost: 0,
627
+ totalPrompts: 0,
628
+ totalTokensInput: 0,
629
+ totalTokensOutput: 0,
630
+ isLoading: false,
631
+ error: 'Failed to load cost data'
632
+ };
633
+ }
634
+ }
581
635
  changeTab(tab) {
582
636
  this.activeTab = tab;
583
637
  // Lazy load analytics when the tab is first accessed
@@ -635,6 +689,9 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
635
689
  // Reload the agent run record to get latest status
636
690
  if (this.record?.ID) {
637
691
  this.record.Load(this.record.ID).then(() => {
692
+ // Clear cost cache and reload
693
+ this.costService.clearCache(this.record.ID);
694
+ this.loadCostMetrics();
638
695
  // Trigger timeline refresh
639
696
  if (this.timelineComponent) {
640
697
  this.timelineComponent.loadData();
@@ -914,7 +971,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
914
971
  return null;
915
972
  }
916
973
  }
917
- static { this.ɵfac = function AIAgentRunFormComponentExtended_Factory(t) { return new (t || AIAgentRunFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
974
+ static { this.ɵfac = function AIAgentRunFormComponentExtended_Factory(t) { return new (t || AIAgentRunFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.AIAgentRunCostService)); }; }
918
975
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunFormComponentExtended, selectors: [["mj-ai-agent-run-form"]], viewQuery: function AIAgentRunFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
919
976
  i0.ɵɵviewQuery(AIAgentRunTimelineComponent, 5);
920
977
  i0.ɵɵviewQuery(AIAgentRunAnalyticsComponent, 5);
@@ -922,7 +979,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
922
979
  let _t;
923
980
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timelineComponent = _t.first);
924
981
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.analyticsComponent = _t.first);
925
- } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 24, consts: [["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], ["class", "agent-name", 4, "ngIf"], [1, "run-id"], ["class", "parent-run", 4, "ngIf"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], ["class", "stat", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["class", "tab-content", "style", "height: 100%;", 4, "ngIf"], ["class", "tab-content", 4, "ngIf"], [1, "agent-name"], [1, "parent-run"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], ["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "json-viewer"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-code"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "height", "calc(100% - 40px)", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [3, "agentRunId", 4, "ngIf"], [3, "agentRunId"], [1, "tab-content"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Status"], ["title", "Usage & Cost"], ["title", "Result", 4, "ngIf"], ["title", "Starting Payload", 4, "ngIf"], ["title", "Final Payload", 4, "ngIf"], ["title", "Payload Diff", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], ["href", "javascript:void(0)", "class", "entity-link", 3, "click", 4, "ngIf"], [4, "ngIf"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "error-message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], ["title", "Starting Payload"], ["title", "Final Payload"], ["title", "Payload Diff"], [2, "padding", "20px", "background", "#f8f9fa"]], template: function AIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
982
+ } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 24, consts: [["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], ["class", "agent-name", 4, "ngIf"], [1, "run-id"], ["class", "parent-run", 4, "ngIf"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], ["class", "stat", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-chart-line"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["class", "tab-content", "style", "height: 100%;", 4, "ngIf"], ["class", "tab-content", 4, "ngIf"], [1, "agent-name"], [1, "parent-run"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], ["class", "value", 4, "ngIf"], ["class", "value loading", 4, "ngIf"], [1, "value", "loading"], [1, "fas", "fa-spinner", "fa-spin"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], ["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "json-viewer"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-code"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "height", "calc(100% - 40px)", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [3, "agentRunId", 4, "ngIf"], [3, "agentRunId"], [1, "tab-content"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Status"], ["title", "Usage & Cost"], ["title", "Result", 4, "ngIf"], ["title", "Starting Payload", 4, "ngIf"], ["title", "Final Payload", 4, "ngIf"], ["title", "Payload Diff", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], ["href", "javascript:void(0)", "class", "entity-link", 3, "click", 4, "ngIf"], [4, "ngIf"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "error-message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], ["title", "Starting Payload"], ["title", "Final Payload"], ["title", "Payload Diff"], [2, "padding", "20px", "background", "#f8f9fa"]], template: function AIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
926
983
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5)(5, "div", 6);
927
984
  i0.ɵɵelement(6, "i", 7);
928
985
  i0.ɵɵelementEnd();
@@ -951,7 +1008,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
951
1008
  i0.ɵɵtext(27);
952
1009
  i0.ɵɵpipe(28, "date");
953
1010
  i0.ɵɵelementEnd()();
954
- i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_29_Template, 6, 4, "div", 23)(30, AIAgentRunFormComponentExtended_div_30_Template, 5, 1, "div", 23)(31, AIAgentRunFormComponentExtended_div_31_Template, 5, 5, "div", 23)(32, AIAgentRunFormComponentExtended_div_32_Template, 6, 4, "div", 23)(33, AIAgentRunFormComponentExtended_div_33_Template, 6, 4, "div", 23);
1011
+ i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_29_Template, 6, 4, "div", 23)(30, AIAgentRunFormComponentExtended_div_30_Template, 5, 1, "div", 23)(31, AIAgentRunFormComponentExtended_div_31_Template, 5, 5, "div", 23)(32, AIAgentRunFormComponentExtended_div_32_Template, 5, 2, "div", 23)(33, AIAgentRunFormComponentExtended_div_33_Template, 5, 2, "div", 23);
955
1012
  i0.ɵɵelementEnd()();
956
1013
  i0.ɵɵelementStart(34, "div", 24)(35, "button", 25);
957
1014
  i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_35_listener() { return ctx.changeTab("timeline"); });
@@ -993,9 +1050,9 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
993
1050
  i0.ɵɵadvance();
994
1051
  i0.ɵɵproperty("ngIf", ctx.record.Success !== null && ctx.record.CompletedAt !== null);
995
1052
  i0.ɵɵadvance();
996
- i0.ɵɵproperty("ngIf", ctx.record.TotalTokensUsed);
1053
+ i0.ɵɵproperty("ngIf", ctx.costMetrics && ctx.costMetrics.totalTokensInput + ctx.costMetrics.totalTokensOutput > 0);
997
1054
  i0.ɵɵadvance();
998
- i0.ɵɵproperty("ngIf", ctx.record.TotalCost != null && ctx.record.TotalCost > 0);
1055
+ i0.ɵɵproperty("ngIf", ctx.costMetrics && ctx.costMetrics.totalCost > 0);
999
1056
  i0.ɵɵadvance(2);
1000
1057
  i0.ɵɵclassProp("active", ctx.activeTab === "timeline");
1001
1058
  i0.ɵɵadvance(3);
@@ -1008,7 +1065,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
1008
1065
  i0.ɵɵproperty("ngIf", ctx.activeTab === "analytics");
1009
1066
  i0.ɵɵadvance();
1010
1067
  i0.ɵɵproperty("ngIf", ctx.activeTab === "details");
1011
- } }, dependencies: [i3.NgClass, i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.PanelBarComponent, i5.PanelBarItemComponent, i5.PanelBarContentDirective, i5.SplitterComponent, i5.SplitterPaneComponent, i6.CodeEditorComponent, i7.DeepDiffComponent, i8.AIAgentRunTimelineComponent, i9.AIAgentRunAnalyticsComponent, i3.DecimalPipe, i3.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat[_ngcontent-%COMP%] .value.success[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%] .value.error[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%] > kendo-panelbar[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%] > .timeline[_ngcontent-%COMP%] {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n\n\n.timeline-children[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-marker[_ngcontent-%COMP%] {\n border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n transition: all 0.2s ease;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n \n .json-detail-pane[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .timeline[_ngcontent-%COMP%] {\n padding-left: 30px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content[_ngcontent-%COMP%] {\n margin-left: 10px;\n }\n}\n\n\n\n.entity-link[_ngcontent-%COMP%] {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link[_ngcontent-%COMP%]:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n color: #0d47a1;\n}\n\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n \n\n margin-top: 0;\n}\n\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] mj-deep-diff[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs) .json-viewer[_ngcontent-%COMP%] {\n margin-top: 16px;\n}"] }); }
1068
+ } }, dependencies: [i4.NgClass, i4.NgIf, i5.NgControlStatus, i5.NgModel, i6.PanelBarComponent, i6.PanelBarItemComponent, i6.PanelBarContentDirective, i6.SplitterComponent, i6.SplitterPaneComponent, i7.CodeEditorComponent, i8.DeepDiffComponent, i9.AIAgentRunTimelineComponent, i10.AIAgentRunAnalyticsComponent, i4.DecimalPipe, i4.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n.stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%] .value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat[_ngcontent-%COMP%] .value.success[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%] .value.error[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%] > kendo-panelbar[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container[_ngcontent-%COMP%] > .timeline[_ngcontent-%COMP%] {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline[_ngcontent-%COMP%] {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] {\n transform: translateX(8px);\n}\n\n.timeline-item.selected[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"][_ngcontent-%COMP%] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"][_ngcontent-%COMP%] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"][_ngcontent-%COMP%] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"][_ngcontent-%COMP%] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"][_ngcontent-%COMP%] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Completed\"][_ngcontent-%COMP%] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Failed\"][_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Running\"][_ngcontent-%COMP%] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta[_ngcontent-%COMP%] .status[data-status=\"Paused\"][_ngcontent-%COMP%] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n\n\n.timeline-children[_ngcontent-%COMP%] {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.child-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n\n\n.sub-run-timeline[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-marker[_ngcontent-%COMP%] {\n border-width: 2px;\n}\n\n.sub-run-item[_ngcontent-%COMP%] .timeline-content[_ngcontent-%COMP%] {\n transition: all 0.2s ease;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta[_ngcontent-%COMP%] .meta-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link[_ngcontent-%COMP%] .btn-link[_ngcontent-%COMP%]:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width[_ngcontent-%COMP%] {\n grid-column: 1 / -1;\n}\n\n.detail-item[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message[_ngcontent-%COMP%] {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%], \n.state-viewer[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n \n .json-detail-pane[_ngcontent-%COMP%] {\n width: 100%;\n }\n \n .timeline[_ngcontent-%COMP%] {\n padding-left: 30px;\n }\n \n .timeline-marker[_ngcontent-%COMP%] {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content[_ngcontent-%COMP%] {\n margin-left: 10px;\n }\n}\n\n\n\n.entity-link[_ngcontent-%COMP%] {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link[_ngcontent-%COMP%]:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link[_ngcontent-%COMP%]:active {\n color: #0d47a1;\n}\n\n\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs[_ngcontent-%COMP%] {\n \n\n margin-top: 0;\n}\n\n\n\n.step-payload-diff[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] mj-deep-diff[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n}\n\n\n\n.detail-pane-content[_ngcontent-%COMP%]:not(.with-tabs) .json-viewer[_ngcontent-%COMP%] {\n margin-top: 16px;\n}"] }); }
1012
1069
  };
1013
1070
  AIAgentRunFormComponentExtended = __decorate([
1014
1071
  RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
@@ -1016,15 +1073,15 @@ AIAgentRunFormComponentExtended = __decorate([
1016
1073
  export { AIAgentRunFormComponentExtended };
1017
1074
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFormComponentExtended, [{
1018
1075
  type: Component,
1019
- args: [{ selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n <div class=\"record-form\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"header-left\">\n <div class=\"icon-wrapper\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"header-info\">\n <h2>AI Agent Run</h2>\n <div class=\"meta-info\">\n <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n <span class=\"run-id\">{{ record.ID }}</span>\n <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n <i class=\"fas fa-level-up-alt\"></i>\n <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n {{ record.Status }}\n </div>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n <i class=\"fas fa-sync-alt\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"header-stats\">\n <div class=\"stat\">\n <span class=\"label\">Started</span>\n <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Completed</span>\n <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Duration</span>\n <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.Success !== null && record.CompletedAt !== null\">\n <span class=\"label\">Result</span>\n <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n {{ record.Success ? 'Success' : 'Failed' }}\n </span>\n </div>\n <div class=\"stat\" *ngIf=\"record.TotalTokensUsed\">\n <span class=\"label\">Tokens</span>\n <span class=\"value\">{{ record.TotalTokensUsed | number:'1.0-0' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.TotalCost != null && record.TotalCost > 0\">\n <span class=\"label\">Cost</span>\n <span class=\"value\">${{ record.TotalCost | number:'1.2-4' }}</span>\n </div>\n </div>\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs\">\n <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n <i class=\"fas fa-stream\"></i> Timeline\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n <i class=\"fas fa-chart-line\"></i> Analytics\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n <i class=\"fas fa-info-circle\"></i> Details\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"content-area\">\n <!-- Timeline Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n <!-- Timeline Pane -->\n <kendo-splitter-pane [min]=\"'400px'\">\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"record.ID\"\n [autoRefresh]=\"record.Status === 'Running'\"\n [refreshInterval]=\"3000\"\n (itemSelected)=\"selectTimelineItem($event)\"\n (navigateToEntity)=\"navigateToEntityRecord($event)\">\n </mj-ai-agent-run-timeline>\n </kendo-splitter-pane>\n \n <!-- JSON Detail Pane -->\n <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n <div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"closeJsonPanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n \n <!-- Action-specific link -->\n <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n <button class=\"btn-link\" (click)=\"navigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n \n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n \n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n \n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(getSelectedItemJson())\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: calc(100% - 40px); width: 100%;\">\n </mj-code-editor>\n </div>\n }\n </div>\n </div>\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Analytics Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'analytics'\" style=\"height: 100%;\">\n <mj-ai-agent-run-analytics \n #analyticsComponent\n [agentRunId]=\"record.ID\"\n *ngIf=\"analyticsLoaded\">\n </mj-ai-agent-run-analytics>\n </div>\n\n <!-- Details Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n <kendo-panelbar>\n <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Agent</label>\n <span>\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n {{ agent?.Name || 'N/A' }}\n </a>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Parent Run ID</label>\n <span>\n <a *ngIf=\"record.ParentRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n {{ record.ParentRunID }}\n </a>\n <span *ngIf=\"!record.ParentRunID\">None (Root)</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Last Run ID</label>\n <span>\n <a *ngIf=\"record.LastRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n {{ record.LastRunID }}\n </a>\n <span *ngIf=\"!record.LastRunID\">None</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Conversation ID</label>\n <span>\n <a *ngIf=\"record.ConversationID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Conversations', record.ConversationID)\">\n {{ record.ConversationID }}\n </a>\n <span *ngIf=\"!record.ConversationID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>User</label>\n <span>\n <a *ngIf=\"record.UserID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Users', record.UserID)\">\n {{ record.User || 'N/A' }}\n </a>\n <span *ngIf=\"!record.UserID\">N/A</span>\n </span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Status\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Status</label>\n <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n {{ record.Status }}\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Success</label>\n <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n </span>\n </div>\n <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n <label>Error Message</label>\n <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Usage & Cost\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Total Tokens Used</label>\n <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Prompt Tokens</label>\n <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Completion Tokens</label>\n <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Cost</label>\n <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Prompt Iterations</label>\n <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Starting Payload\" *ngIf=\"record.StartingPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedStartingPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Final Payload\" *ngIf=\"record.FinalPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedFinalPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Payload Diff\" *ngIf=\"showPayloadDiff\">\n <ng-template kendoPanelBarContent>\n <div style=\"padding: 20px; background: #f8f9fa;\">\n <mj-deep-diff\n [oldValue]=\"startingPayloadObject\"\n [newValue]=\"finalPayloadObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"10\"\n [maxStringLength]=\"200\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n </div>\n </div>\n</div>", styles: [".ai-agent-run-form {\n height: 100%;\n overflow: auto;\n}\n\n/* Header Styles */\n.header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat .label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat .value {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat .value.success {\n color: #28a745;\n}\n\n.stat .value.error {\n color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n/* Content Area */\n.content-area {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content {\n height: 100%;\n overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n height: 100%;\n overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header h3 i {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta .meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link .btn-link:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n/* Timeline Styles */\n.timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container > .timeline {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected {\n transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header h5 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta .status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n/* Timeline Children */\n.timeline-children {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item {\n margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta label {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link .btn-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width {\n grid-column: 1 / -1;\n}\n\n.detail-item label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item span {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n flex: 1;\n min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats {\n flex-wrap: wrap;\n }\n \n .json-detail-pane {\n width: 100%;\n }\n \n .timeline {\n padding-left: 30px;\n }\n \n .timeline-marker {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content {\n margin-left: 10px;\n }\n}\n\n/* Entity Link Styles */\n.entity-link {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link:active {\n color: #0d47a1;\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab i {\n font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n /* When tabs are shown, content starts right after tabs */\n margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n display: block;\n height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n margin-top: 16px;\n}"] }]
1020
- }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], { timelineComponent: [{
1076
+ args: [{ selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n <div class=\"record-form\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"header-left\">\n <div class=\"icon-wrapper\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"header-info\">\n <h2>AI Agent Run</h2>\n <div class=\"meta-info\">\n <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n <span class=\"run-id\">{{ record.ID }}</span>\n <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n <i class=\"fas fa-level-up-alt\"></i>\n <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n {{ record.Status }}\n </div>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n <i class=\"fas fa-sync-alt\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"header-stats\">\n <div class=\"stat\">\n <span class=\"label\">Started</span>\n <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Completed</span>\n <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n <span class=\"label\">Duration</span>\n <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n </div>\n <div class=\"stat\" *ngIf=\"record.Success !== null && record.CompletedAt !== null\">\n <span class=\"label\">Result</span>\n <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n {{ record.Success ? 'Success' : 'Failed' }}\n </span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) > 0\">\n <span class=\"label\">Tokens</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">{{ (costMetrics.totalTokensInput + costMetrics.totalTokensOutput) | number:'1.0-0' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n <div class=\"stat\" *ngIf=\"costMetrics && costMetrics.totalCost > 0\">\n <span class=\"label\">Cost</span>\n <span class=\"value\" *ngIf=\"!costMetrics.isLoading\">${{ costMetrics.totalCost | number:'1.2-4' }}</span>\n <span class=\"value loading\" *ngIf=\"costMetrics.isLoading\"><i class=\"fas fa-spinner fa-spin\"></i></span>\n </div>\n </div>\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs\">\n <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"changeTab('timeline')\">\n <i class=\"fas fa-stream\"></i> Timeline\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'analytics'\" (click)=\"changeTab('analytics')\">\n <i class=\"fas fa-chart-line\"></i> Analytics\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\">\n <i class=\"fas fa-info-circle\"></i> Details\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"content-area\">\n <!-- Timeline Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n <!-- Timeline Pane -->\n <kendo-splitter-pane [min]=\"'400px'\">\n <mj-ai-agent-run-timeline\n [aiAgentRunId]=\"record.ID\"\n [autoRefresh]=\"record.Status === 'Running'\"\n [refreshInterval]=\"3000\"\n (itemSelected)=\"selectTimelineItem($event)\"\n (navigateToEntity)=\"navigateToEntityRecord($event)\">\n </mj-ai-agent-run-timeline>\n </kendo-splitter-pane>\n \n <!-- JSON Detail Pane -->\n <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n <div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n <div class=\"json-pane-header\">\n <h3>\n <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n {{ selectedTimelineItem.title }}\n </h3>\n <button class=\"btn-icon\" (click)=\"closeJsonPanel()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n </div>\n <div class=\"json-pane-content\">\n <div class=\"json-meta\">\n <div class=\"meta-item\">\n <label>Type</label>\n <span>{{ selectedTimelineItem.type }}</span>\n </div>\n <div class=\"meta-item\">\n <label>Status</label>\n <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n {{ selectedTimelineItem.status }}\n </span>\n </div>\n <div class=\"meta-item\">\n <label>Duration</label>\n <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n </div>\n </div>\n \n <!-- Action-specific link -->\n <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n <button class=\"btn-link\" (click)=\"navigateToActionLog(selectedTimelineItem.data.ID)\">\n <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n </button>\n </div>\n \n <!-- Tab Navigation - Only show when we have both options -->\n @if (showStepPayloadDiff) {\n <div class=\"detail-pane-tabs\">\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'diff'\"\n (click)=\"detailPaneTab = 'diff'\">\n <i class=\"fa-solid fa-code-branch\"></i>\n Payload Changes\n </button>\n <button \n class=\"detail-tab\" \n [class.active]=\"detailPaneTab === 'json'\"\n (click)=\"detailPaneTab = 'json'\">\n <i class=\"fa-solid fa-code\"></i>\n Full JSON\n </button>\n </div>\n }\n \n <!-- Tab Content -->\n <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\n <!-- Payload Diff Tab -->\n @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n <div class=\"step-payload-diff\">\n <mj-deep-diff\n [oldValue]=\"stepPayloadAtStartObject\"\n [newValue]=\"stepPayloadAtEndObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"8\"\n [maxStringLength]=\"150\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n }\n \n <!-- Full JSON Tab -->\n @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\n <div class=\"json-viewer\">\n <div class=\"json-toolbar\">\n <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(getSelectedItemJson())\">\n <i class=\"fas fa-copy\"></i>\n </button>\n </div>\n <mj-code-editor\n [(ngModel)]=\"selectedItemJsonString\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: calc(100% - 40px); width: 100%;\">\n </mj-code-editor>\n </div>\n }\n </div>\n </div>\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Analytics Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'analytics'\" style=\"height: 100%;\">\n <mj-ai-agent-run-analytics \n #analyticsComponent\n [agentRunId]=\"record.ID\"\n *ngIf=\"analyticsLoaded\">\n </mj-ai-agent-run-analytics>\n </div>\n\n <!-- Details Tab -->\n <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n <kendo-panelbar>\n <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Agent</label>\n <span>\n <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n {{ agent?.Name || 'N/A' }}\n </a>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Parent Run ID</label>\n <span>\n <a *ngIf=\"record.ParentRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.ParentRunID)\">\n {{ record.ParentRunID }}\n </a>\n <span *ngIf=\"!record.ParentRunID\">None (Root)</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Last Run ID</label>\n <span>\n <a *ngIf=\"record.LastRunID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Agent Runs', record.LastRunID)\">\n {{ record.LastRunID }}\n </a>\n <span *ngIf=\"!record.LastRunID\">None</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Conversation ID</label>\n <span>\n <a *ngIf=\"record.ConversationID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Conversations', record.ConversationID)\">\n {{ record.ConversationID }}\n </a>\n <span *ngIf=\"!record.ConversationID\">N/A</span>\n </span>\n </div>\n <div class=\"detail-item\">\n <label>User</label>\n <span>\n <a *ngIf=\"record.UserID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('Users', record.UserID)\">\n {{ record.User || 'N/A' }}\n </a>\n <span *ngIf=\"!record.UserID\">N/A</span>\n </span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Execution Status\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Status</label>\n <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n {{ record.Status }}\n </span>\n </div>\n <div class=\"detail-item\">\n <label>Success</label>\n <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n </span>\n </div>\n <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n <label>Error Message</label>\n <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Usage & Cost\">\n <ng-template kendoPanelBarContent>\n <div class=\"details-grid\">\n <div class=\"detail-item\">\n <label>Total Tokens Used</label>\n <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Prompt Tokens</label>\n <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Completion Tokens</label>\n <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Cost</label>\n <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n </div>\n <div class=\"detail-item\">\n <label>Total Prompt Iterations</label>\n <span>{{ record.TotalPromptIterations != null ? (record.TotalPromptIterations | number:'1.0-0') : 'N/A' }}</span>\n </div>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedResult\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Starting Payload\" *ngIf=\"record.StartingPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedStartingPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Final Payload\" *ngIf=\"record.FinalPayload\">\n <ng-template kendoPanelBarContent>\n <div class=\"result-viewer\">\n <mj-code-editor\n [ngModel]=\"parsedFinalPayload\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n style=\"height: 300px; width: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n \n <kendo-panelbar-item title=\"Payload Diff\" *ngIf=\"showPayloadDiff\">\n <ng-template kendoPanelBarContent>\n <div style=\"padding: 20px; background: #f8f9fa;\">\n <mj-deep-diff\n [oldValue]=\"startingPayloadObject\"\n [newValue]=\"finalPayloadObject\"\n [title]=\"''\"\n [showSummary]=\"true\"\n [showUnchanged]=\"false\"\n [expandAll]=\"false\"\n [maxDepth]=\"10\"\n [maxStringLength]=\"200\"\n [treatNullAsUndefined]=\"true\">\n </mj-deep-diff>\n </div>\n </ng-template>\n </kendo-panelbar-item>\n </kendo-panelbar>\n </div>\n </div>\n </div>\n</div>", styles: [".ai-agent-run-form {\n height: 100%;\n overflow: auto;\n}\n\n/* Header Styles */\n.header {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border-bottom: 1px solid #e0e6ed;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 16px;\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.icon-wrapper {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, #2196f3, #1976d2);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 20px;\n}\n\n.header-info h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.meta-info {\n display: flex;\n gap: 12px;\n margin-top: 4px;\n font-size: 14px;\n color: #6c757d;\n}\n\n.parent-run {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.parent-link {\n color: #ff6358;\n text-decoration: none;\n cursor: pointer;\n transition: color 0.2s;\n}\n\n.parent-link:hover {\n color: #ff4444;\n text-decoration: underline;\n}\n\n.agent-name {\n font-weight: 500;\n color: #495057;\n}\n\n.run-id {\n font-family: monospace;\n font-size: 12px;\n opacity: 0.7;\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.status-badge {\n padding: 6px 16px;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n background: #fff3cd;\n color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.status-badge.small {\n padding: 4px 12px;\n font-size: 11px;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n}\n\n.btn-icon:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n.header-stats {\n display: flex;\n gap: 24px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.stat .label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.stat .value {\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n}\n\n.stat .value.success {\n color: #28a745;\n}\n\n.stat .value.error {\n color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n display: flex;\n border-bottom: 1px solid #dee2e6;\n background: #f8f9fa;\n}\n\n.tab {\n padding: 12px 24px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n color: #6c757d;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s ease;\n border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n color: #495057;\n background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n background: white;\n}\n\n/* Content Area */\n.content-area {\n position: relative;\n height: calc(100vh - 280px);\n overflow: auto;\n background: white;\n}\n\n.tab-content {\n height: 100%;\n overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n height: 100%;\n overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: #f8f9fa;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.json-pane-header h3 i {\n color: #6b7280;\n font-size: 14px;\n}\n\n.json-pane-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.json-meta {\n display: flex;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta .meta-item label {\n font-size: 11px;\n text-transform: uppercase;\n color: #6b7280;\n font-weight: 600;\n letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n background: none;\n border: none;\n color: #2196f3;\n font-size: 14px;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 4px;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-link .btn-link:hover {\n background: rgba(33, 150, 243, 0.08);\n color: #1976d2;\n}\n\n.json-viewer {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: white;\n border-radius: 8px;\n border: 1px solid #e0e6ed;\n overflow: auto;\n padding: 20px;\n gap: 10px;\n min-height: 0;\n margin-bottom: 45px;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n padding: 8px 12px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n}\n\n/* Timeline Styles */\n.timeline-container {\n height: 100%;\n overflow-y: auto;\n padding: 20px;\n}\n\n.timeline-container > .timeline {\n max-width: 900px;\n margin: 0 auto;\n}\n\n.timeline {\n position: relative;\n padding-left: 40px;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n left: 20px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.timeline-item {\n position: relative;\n margin-bottom: 24px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n transform: translateX(4px);\n}\n\n.timeline-item.selected {\n transform: translateX(8px);\n}\n\n.timeline-item.selected .timeline-content {\n background: #f0f7ff;\n border-color: #2196f3;\n}\n\n.timeline-marker {\n position: absolute;\n left: -30px;\n top: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border: 3px solid #e9ecef;\n z-index: 1;\n transition: all 0.2s ease;\n}\n\n.timeline-marker[data-color=\"success\"] {\n border-color: #28a745;\n color: #28a745;\n}\n\n.timeline-marker[data-color=\"error\"] {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n.timeline-marker[data-color=\"info\"] {\n border-color: #17a2b8;\n color: #17a2b8;\n}\n\n.timeline-marker[data-color=\"warning\"] {\n border-color: #ffc107;\n color: #ffc107;\n}\n\n.timeline-marker[data-color=\"secondary\"] {\n border-color: #6c757d;\n color: #6c757d;\n}\n\n.timeline-marker.small {\n width: 28px;\n height: 28px;\n font-size: 12px;\n}\n\n.timeline-content {\n background: white;\n border: 1px solid #e9ecef;\n border-radius: 12px;\n padding: 16px 20px;\n margin-left: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n transition: all 0.2s ease;\n}\n\n.timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.timeline-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #2c3e50;\n}\n\n.timeline-header h5 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #495057;\n}\n\n.timeline-time {\n font-size: 12px;\n color: #6c757d;\n font-family: monospace;\n}\n\n.timeline-subtitle {\n font-size: 13px;\n color: #6c757d;\n margin-bottom: 8px;\n}\n\n.timeline-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.timeline-meta .status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.timeline-meta .status[data-status=\"Completed\"] {\n background: #d4edda;\n color: #155724;\n}\n\n.timeline-meta .status[data-status=\"Failed\"] {\n background: #f8d7da;\n color: #721c24;\n}\n\n.timeline-meta .status[data-status=\"Running\"] {\n background: #cce5ff;\n color: #004085;\n}\n\n.timeline-meta .status[data-status=\"Paused\"] {\n background: #e2e3e5;\n color: #383d41;\n}\n\n.duration {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.timeline-actions {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.btn-link {\n background: none;\n border: none;\n color: #2196f3;\n cursor: pointer;\n font-size: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n}\n\n.btn-link:hover {\n background: rgba(33, 150, 243, 0.1);\n}\n\n.btn-expand {\n width: 24px;\n height: 24px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 12px;\n}\n\n.btn-expand:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n}\n\n/* Timeline Children */\n.timeline-children {\n position: relative;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.timeline-children::before {\n content: '';\n position: absolute;\n left: -10px;\n top: -12px;\n bottom: 0;\n width: 2px;\n background: #e9ecef;\n}\n\n.child-item {\n margin-bottom: 12px;\n}\n\n.child-item .timeline-content {\n background: #f8f9fa;\n border-color: #e0e6ed;\n}\n\n/* Sub-run timeline styles */\n.sub-run-timeline {\n background: rgba(33, 150, 243, 0.02);\n border-left: 2px solid rgba(33, 150, 243, 0.2);\n margin-left: 20px;\n padding-left: 20px;\n margin-top: 8px;\n margin-bottom: 8px;\n}\n\n.sub-run-item .timeline-marker {\n border-width: 2px;\n}\n\n.sub-run-item .timeline-content {\n transition: all 0.2s ease;\n}\n\n/* JSON Detail Pane (in splitter) */\n.json-detail-pane {\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n padding: 16px 20px;\n background: #f8f9fa;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n}\n\n.json-pane-header h3 {\n margin: 0;\n font-size: 16px;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n}\n\n.json-pane-content {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n}\n\n.json-meta {\n padding: 16px 20px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n\n.json-meta .meta-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.json-meta label {\n font-size: 11px;\n color: #7c8798;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.json-meta span {\n font-size: 14px;\n color: #2c3e50;\n font-weight: 500;\n}\n\n.action-link {\n padding: 12px 20px;\n border-bottom: 1px solid #e0e6ed;\n flex-shrink: 0;\n}\n\n.action-link .btn-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #2196f3;\n text-decoration: none;\n font-size: 14px;\n padding: 8px 12px;\n background: #f0f7ff;\n border: 1px solid #d0e5ff;\n border-radius: 4px;\n transition: all 0.2s;\n cursor: pointer;\n}\n\n.action-link .btn-link:hover {\n background: #e1f0ff;\n border-color: #b0d5ff;\n text-decoration: none;\n}\n\n\n.json-toolbar {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n/* Details Tab */\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n padding: 20px;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-item.full-width {\n grid-column: 1 / -1;\n}\n\n.detail-item label {\n font-size: 12px;\n color: #6c757d;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.detail-item span {\n font-size: 14px;\n color: #495057;\n}\n\n.error-message {\n background: #f8d7da;\n color: #721c24;\n padding: 12px;\n border-radius: 8px;\n font-size: 13px;\n}\n\n.result-viewer,\n.state-viewer {\n padding: 20px;\n max-height: 450px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.result-viewer mj-code-editor,\n.state-viewer mj-code-editor {\n flex: 1;\n min-height: 0;\n}\n\n/* Empty States */\n.empty-state,\n.loading-state,\n.error-state {\n text-align: center;\n padding: 60px 20px;\n color: #6c757d;\n}\n\n.empty-state i,\n.loading-state i,\n.error-state i {\n opacity: 0.3;\n margin-bottom: 16px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-stats {\n flex-wrap: wrap;\n }\n \n .json-detail-pane {\n width: 100%;\n }\n \n .timeline {\n padding-left: 30px;\n }\n \n .timeline-marker {\n left: -25px;\n width: 32px;\n height: 32px;\n }\n \n .timeline-content {\n margin-left: 10px;\n }\n}\n\n/* Entity Link Styles */\n.entity-link {\n color: #2196f3;\n text-decoration: none;\n transition: all 0.2s ease;\n border-bottom: 1px solid transparent;\n display: inline-block;\n}\n\n.entity-link:hover {\n color: #1976d2;\n border-bottom-color: #1976d2;\n}\n\n.entity-link:active {\n color: #0d47a1;\n}\n\n/* Detail Pane Tabs */\n.detail-pane-tabs {\n display: flex;\n gap: 8px;\n margin: 8px 0 0 0;\n border-bottom: 1px solid #e0e6ed;\n padding: 0 16px;\n}\n\n.detail-tab {\n padding: 10px 16px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-tab:hover {\n color: #495057;\n background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n color: #2196f3;\n border-bottom-color: #2196f3;\n}\n\n.detail-tab i {\n font-size: 14px;\n}\n\n/* Detail Pane Content */\n.detail-pane-content {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n margin-bottom: 35px;\n}\n\n.detail-pane-content.with-tabs {\n /* When tabs are shown, content starts right after tabs */\n margin-top: 0;\n}\n\n/* Step Payload Diff */\n.step-payload-diff {\n height: 100%;\n overflow-y: auto;\n padding: 16px;\n}\n\n.step-payload-diff mj-deep-diff {\n display: block;\n height: 100%;\n}\n\n/* JSON Viewer adjustments when no tabs */\n.detail-pane-content:not(.with-tabs) .json-viewer {\n margin-top: 16px;\n}"] }]
1077
+ }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.AIAgentRunCostService }], { timelineComponent: [{
1021
1078
  type: ViewChild,
1022
1079
  args: [AIAgentRunTimelineComponent]
1023
1080
  }], analyticsComponent: [{
1024
1081
  type: ViewChild,
1025
1082
  args: [AIAgentRunAnalyticsComponent]
1026
1083
  }] }); })();
1027
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponentExtended, { className: "AIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 20 }); })();
1084
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponentExtended, { className: "AIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 21 }); })();
1028
1085
  // Loader function for AIAgentRunFormComponent
1029
1086
  export function LoadAIAgentRunFormComponent() {
1030
1087
  // This function is called to ensure the form is loaded