@memberjunction/ng-core-entity-forms 2.129.0 → 2.130.1

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

@@ -20,33 +20,34 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
 import * as i3 from "./ai-agent-run-cost.service";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/forms";
-import * as i6 from "@progress/kendo-angular-layout";
-import * as i7 from "@memberjunction/ng-code-editor";
-import * as i8 from "@memberjunction/ng-deep-diff";
-import * as i9 from "./ai-agent-run-timeline.component";
-import * as i10 from "./ai-agent-run-analytics.component";
-import * as i11 from "./ai-agent-run-visualization.component";
-import * as i12 from "./ai-agent-run-step-detail.component";
+import * as i4 from "@memberjunction/ng-base-application";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/forms";
+import * as i7 from "@progress/kendo-angular-layout";
+import * as i8 from "@memberjunction/ng-code-editor";
+import * as i9 from "@memberjunction/ng-deep-diff";
+import * as i10 from "./ai-agent-run-timeline.component";
+import * as i11 from "./ai-agent-run-analytics.component";
+import * as i12 from "./ai-agent-run-visualization.component";
+import * as i13 from "./ai-agent-run-step-detail.component";
 function AIAgentRunFormComponentExtended_img_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 37);
+    i0.ɵɵelement(0, "img", 38);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("src", ctx_r0.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r0.agent.Name || "Agent");
 } }
 function AIAgentRunFormComponentExtended_i_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 18);
+    i0.ɵɵelement(0, "i", 19);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.agent.IconClass);
 } }
 function AIAgentRunFormComponentExtended_i_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+    i0.ɵɵelement(0, "i", 39);
 } }
 function AIAgentRunFormComponentExtended_span_13_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 39)(1, "a", 40);
+    i0.ɵɵelementStart(0, "span", 40)(1, "a", 41);
     i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_span_13_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Agents", ctx_r0.record.AgentID)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -57,18 +58,29 @@ function AIAgentRunFormComponentExtended_span_13_Template(rf, ctx) { if (rf & 1)
 } }
 function AIAgentRunFormComponentExtended_span_16_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 41);
-    i0.ɵɵelement(1, "i", 42);
-    i0.ɵɵelementStart(2, "a", 43);
+    i0.ɵɵelementStart(0, "span", 42);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵelementStart(2, "a", 44);
     i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_span_16_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToParentRun()); });
     i0.ɵɵtext(3, "Parent Run");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentRunFormComponentExtended_div_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_span_17_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 45);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_span_17_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToConversation()); });
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Conversation");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 47);
+    i0.ɵɵelementEnd();
+} }
+function AIAgentRunFormComponentExtended_div_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Completed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(3, "span", 26);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd()();
@@ -77,11 +89,11 @@ function AIAgentRunFormComponentExtended_div_31_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r0.record.CompletedAt, "medium"));
 } }
-function AIAgentRunFormComponentExtended_div_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_div_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(3, "span", 26);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -89,11 +101,11 @@ function AIAgentRunFormComponentExtended_div_32_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.calculateDuration(ctx_r0.record.StartedAt, ctx_r0.record.CompletedAt));
 } }
-function AIAgentRunFormComponentExtended_div_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_div_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Result");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(3, "span", 26);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -103,8 +115,8 @@ function AIAgentRunFormComponentExtended_div_33_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Success ? "Success" : "Failed", " ");
 } }
-function AIAgentRunFormComponentExtended_div_34_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+function AIAgentRunFormComponentExtended_div_35_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
     i0.ɵɵelementEnd();
@@ -113,16 +125,16 @@ function AIAgentRunFormComponentExtended_div_34_span_3_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalTokensInput + ctx_r0.costMetrics.totalTokensOutput, "1.0-0"));
 } }
-function AIAgentRunFormComponentExtended_div_34_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 46);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_35_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_div_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_34_span_3_Template, 3, 4, "span", 44)(4, AIAgentRunFormComponentExtended_div_34_span_4_Template, 2, 0, "span", 45);
+    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_35_span_3_Template, 3, 4, "span", 48)(4, AIAgentRunFormComponentExtended_div_35_span_4_Template, 2, 0, "span", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -131,8 +143,8 @@ function AIAgentRunFormComponentExtended_div_34_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.costMetrics.isLoading);
 } }
-function AIAgentRunFormComponentExtended_div_35_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+function AIAgentRunFormComponentExtended_div_36_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "number");
     i0.ɵɵelementEnd();
@@ -141,16 +153,16 @@ function AIAgentRunFormComponentExtended_div_35_span_3_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(2, 1, ctx_r0.costMetrics.totalCost, "1.2-4"), "");
 } }
-function AIAgentRunFormComponentExtended_div_35_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 46);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_36_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_div_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_35_span_3_Template, 3, 4, "span", 44)(4, AIAgentRunFormComponentExtended_div_35_span_4_Template, 2, 0, "span", 45);
+    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_36_span_3_Template, 3, 4, "span", 48)(4, AIAgentRunFormComponentExtended_div_36_span_4_Template, 2, 0, "span", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -159,11 +171,11 @@ function AIAgentRunFormComponentExtended_div_35_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.costMetrics.isLoading);
 } }
-function AIAgentRunFormComponentExtended_div_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
+function AIAgentRunFormComponentExtended_div_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 25);
     i0.ɵɵtext(2, "Effort Level");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵelementStart(3, "span", 26);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -171,15 +183,15 @@ function AIAgentRunFormComponentExtended_div_36_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.EffortLevel);
 } }
-function AIAgentRunFormComponentExtended_div_37_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
-    i0.ɵɵelement(2, "i", 50);
-    i0.ɵɵelementStart(3, "div", 51)(4, "div", 52);
+function AIAgentRunFormComponentExtended_div_38_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 54);
+    i0.ɵɵelementStart(3, "div", 55)(4, "div", 56);
     i0.ɵɵtext(5, "Configuration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 53)(7, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_37_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Configurations", ctx_r0.record.ConfigurationID)); });
+    i0.ɵɵelementStart(6, "div", 57)(7, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_38_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Configurations", ctx_r0.record.ConfigurationID)); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -187,13 +199,13 @@ function AIAgentRunFormComponentExtended_div_37_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Configuration || "Unknown", " ");
 } }
-function AIAgentRunFormComponentExtended_div_52_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54)(1, "kendo-splitter", 55)(2, "kendo-splitter-pane", 56)(3, "mj-ai-agent-run-timeline", 57);
-    i0.ɵɵlistener("itemSelected", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); })("agentRunCompleted", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_timeline_agentRunCompleted_3_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAgentRunCompleted($event)); });
+function AIAgentRunFormComponentExtended_div_53_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58)(1, "kendo-splitter", 59)(2, "kendo-splitter-pane", 60)(3, "mj-ai-agent-run-timeline", 61);
+    i0.ɵɵlistener("itemSelected", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); })("agentRunCompleted", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_timeline_agentRunCompleted_3_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAgentRunCompleted($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "kendo-splitter-pane", 58)(5, "mj-ai-agent-run-step-detail", 59);
-    i0.ɵɵlistener("closePanel", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_step_detail_closePanel_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); })("navigateToActionLog", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_step_detail_navigateToActionLog_5_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToActionLog($event)); })("copyToClipboard", function AIAgentRunFormComponentExtended_div_52_Template_mj_ai_agent_run_step_detail_copyToClipboard_5_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.copyToClipboard($event)); });
+    i0.ɵɵelementStart(4, "kendo-splitter-pane", 62)(5, "mj-ai-agent-run-step-detail", 63);
+    i0.ɵɵlistener("closePanel", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_step_detail_closePanel_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); })("navigateToActionLog", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_step_detail_navigateToActionLog_5_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToActionLog($event)); })("copyToClipboard", function AIAgentRunFormComponentExtended_div_53_Template_mj_ai_agent_run_step_detail_copyToClipboard_5_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.copyToClipboard($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -206,40 +218,40 @@ function AIAgentRunFormComponentExtended_div_52_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("selectedTimelineItem", ctx_r0.selectedTimelineItem);
 } }
-function AIAgentRunFormComponentExtended_div_53_mj_ai_agent_run_visualization_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-ai-agent-run-visualization", 61, 0);
+function AIAgentRunFormComponentExtended_div_54_mj_ai_agent_run_visualization_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-ai-agent-run-visualization", 65, 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("aiAgentRunId", ctx_r0.record.ID)("dataHelper", ctx_r0.dataHelper);
 } }
-function AIAgentRunFormComponentExtended_div_53_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_53_mj_ai_agent_run_visualization_1_Template, 2, 2, "mj-ai-agent-run-visualization", 60);
+function AIAgentRunFormComponentExtended_div_54_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_54_mj_ai_agent_run_visualization_1_Template, 2, 2, "mj-ai-agent-run-visualization", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.visualizationLoaded);
 } }
-function AIAgentRunFormComponentExtended_div_54_mj_ai_agent_run_analytics_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 63, 1);
+function AIAgentRunFormComponentExtended_div_55_mj_ai_agent_run_analytics_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-ai-agent-run-analytics", 67, 1);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("agentRunId", ctx_r0.record.ID);
 } }
-function AIAgentRunFormComponentExtended_div_54_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_54_mj_ai_agent_run_analytics_1_Template, 2, 1, "mj-ai-agent-run-analytics", 62);
+function AIAgentRunFormComponentExtended_div_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_mj_ai_agent_run_analytics_1_Template, 2, 1, "mj-ai-agent-run-analytics", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.analyticsLoaded);
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_11_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_11_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.ParentRunID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_11_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_11_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.ParentRunID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -247,15 +259,15 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_11_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.ParentRunID, " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_span_12_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "None (Root)");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_17_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_17_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("MJ: AI Agent Runs", ctx_r0.record.LastRunID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_17_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_17_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.LastRunID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -263,15 +275,15 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_17_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.LastRunID, " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_span_18_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_span_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "None");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_23_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_23_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Conversations", ctx_r0.record.ConversationID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_23_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_23_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Conversations", ctx_r0.record.ConversationID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -279,15 +291,15 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_23_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.ConversationID, " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_span_24_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_span_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_29_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_29_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Users", ctx_r0.record.UserID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_29_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_3_a_29_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("Users", ctx_r0.record.UserID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -295,43 +307,43 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_3_a_29_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.User || "N/A", " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_span_30_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_span_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 80)(1, "div", 81)(2, "label");
     i0.ɵɵtext(3, "Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span")(5, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_3_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Agents", ctx_r0.record.AgentID)); });
+    i0.ɵɵelementStart(4, "span")(5, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_3_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Agents", ctx_r0.record.AgentID)); });
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 77)(8, "label");
+    i0.ɵɵelementStart(7, "div", 81)(8, "label");
     i0.ɵɵtext(9, "Parent Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
-    i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_55_ng_template_3_a_11_Template, 2, 1, "a", 78)(12, AIAgentRunFormComponentExtended_div_55_ng_template_3_span_12_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_56_ng_template_3_a_11_Template, 2, 1, "a", 82)(12, AIAgentRunFormComponentExtended_div_56_ng_template_3_span_12_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 77)(14, "label");
+    i0.ɵɵelementStart(13, "div", 81)(14, "label");
     i0.ɵɵtext(15, "Last Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "span");
-    i0.ɵɵtemplate(17, AIAgentRunFormComponentExtended_div_55_ng_template_3_a_17_Template, 2, 1, "a", 78)(18, AIAgentRunFormComponentExtended_div_55_ng_template_3_span_18_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(17, AIAgentRunFormComponentExtended_div_56_ng_template_3_a_17_Template, 2, 1, "a", 82)(18, AIAgentRunFormComponentExtended_div_56_ng_template_3_span_18_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 77)(20, "label");
+    i0.ɵɵelementStart(19, "div", 81)(20, "label");
     i0.ɵɵtext(21, "Conversation ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "span");
-    i0.ɵɵtemplate(23, AIAgentRunFormComponentExtended_div_55_ng_template_3_a_23_Template, 2, 1, "a", 78)(24, AIAgentRunFormComponentExtended_div_55_ng_template_3_span_24_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(23, AIAgentRunFormComponentExtended_div_56_ng_template_3_a_23_Template, 2, 1, "a", 82)(24, AIAgentRunFormComponentExtended_div_56_ng_template_3_span_24_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 77)(26, "label");
+    i0.ɵɵelementStart(25, "div", 81)(26, "label");
     i0.ɵɵtext(27, "User");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(28, "span");
-    i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_55_ng_template_3_a_29_Template, 2, 1, "a", 78)(30, AIAgentRunFormComponentExtended_div_55_ng_template_3_span_30_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_56_ng_template_3_a_29_Template, 2, 1, "a", 82)(30, AIAgentRunFormComponentExtended_div_56_ng_template_3_span_30_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -354,10 +366,10 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_3_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r0.record.UserID);
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_5_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_5_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Models", ctx_r0.record.OverrideModelID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_5_a_5_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_5_a_5_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Models", ctx_r0.record.OverrideModelID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -365,15 +377,15 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_5_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.OverrideModel || "N/A", " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_5_span_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_5_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_11_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 40);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_11_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Vendors", ctx_r0.record.OverrideVendorID)); });
+function AIAgentRunFormComponentExtended_div_56_ng_template_5_a_11_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_56_ng_template_5_a_11_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openEntityRecord("AI Vendors", ctx_r0.record.OverrideVendorID)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -381,25 +393,25 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_5_a_11_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.OverrideVendor || "N/A", " ");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_5_span_12_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_5_span_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "div", 81)(2, "label");
     i0.ɵɵtext(3, "Override Model");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_55_ng_template_5_a_5_Template, 2, 1, "a", 78)(6, AIAgentRunFormComponentExtended_div_55_ng_template_5_span_6_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_56_ng_template_5_a_5_Template, 2, 1, "a", 82)(6, AIAgentRunFormComponentExtended_div_56_ng_template_5_span_6_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 77)(8, "label");
+    i0.ɵɵelementStart(7, "div", 81)(8, "label");
     i0.ɵɵtext(9, "Override Vendor");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
-    i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_55_ng_template_5_a_11_Template, 2, 1, "a", 78)(12, AIAgentRunFormComponentExtended_div_55_ng_template_5_span_12_Template, 2, 0, "span", 79);
+    i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_56_ng_template_5_a_11_Template, 2, 1, "a", 82)(12, AIAgentRunFormComponentExtended_div_56_ng_template_5_span_12_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 77)(14, "label");
+    i0.ɵɵelementStart(13, "div", 81)(14, "label");
     i0.ɵɵtext(15, "Verbose Logging");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "span");
@@ -418,26 +430,26 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_5_Template(rf, ctx)
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.record.Verbose ? "Yes" : "No");
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "In Progress");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 80);
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
     i0.ɵɵtext(1, "Yes");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 81);
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 85);
     i0.ɵɵtext(1, "No");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 87)(1, "label");
     i0.ɵɵtext(2, "Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 84);
+    i0.ɵɵelementStart(3, "div", 88);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -445,11 +457,11 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_7_div_12_Template(rf
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.Message);
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 87)(1, "label");
     i0.ɵɵtext(2, "Error Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 81);
+    i0.ɵɵelementStart(3, "div", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -457,19 +469,19 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_7_div_13_Template(rf
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.ErrorMessage);
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "div", 81)(2, "label");
     i0.ɵɵtext(3, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 17);
+    i0.ɵɵelementStart(4, "span", 18);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 77)(7, "label");
+    i0.ɵɵelementStart(6, "div", 81)(7, "label");
     i0.ɵɵtext(8, "Success");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_9_Template, 2, 0, "span")(10, AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_10_Template, 2, 0, "span", 80)(11, AIAgentRunFormComponentExtended_div_55_ng_template_7_Conditional_11_Template, 2, 0, "span", 81);
+    i0.ɵɵtemplate(9, AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_9_Template, 2, 0, "span")(10, AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_10_Template, 2, 0, "span", 84)(11, AIAgentRunFormComponentExtended_div_56_ng_template_7_Conditional_11_Template, 2, 0, "span", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, AIAgentRunFormComponentExtended_div_55_ng_template_7_div_12_Template, 5, 1, "div", 82)(13, AIAgentRunFormComponentExtended_div_55_ng_template_7_div_13_Template, 5, 1, "div", 82);
+    i0.ɵɵtemplate(12, AIAgentRunFormComponentExtended_div_56_ng_template_7_div_12_Template, 5, 1, "div", 86)(13, AIAgentRunFormComponentExtended_div_56_ng_template_7_div_13_Template, 5, 1, "div", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -484,36 +496,36 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_7_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.record.ErrorMessage);
 } }
-function AIAgentRunFormComponentExtended_div_55_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "label");
+function AIAgentRunFormComponentExtended_div_56_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "div", 81)(2, "label");
     i0.ɵɵtext(3, "Total Tokens Used");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 77)(8, "label");
+    i0.ɵɵelementStart(7, "div", 81)(8, "label");
     i0.ɵɵtext(9, "Prompt Tokens");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 77)(14, "label");
+    i0.ɵɵelementStart(13, "div", 81)(14, "label");
     i0.ɵɵtext(15, "Completion Tokens");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17);
     i0.ɵɵpipe(18, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 77)(20, "label");
+    i0.ɵɵelementStart(19, "div", 81)(20, "label");
     i0.ɵɵtext(21, "Total Cost");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23);
     i0.ɵɵpipe(24, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 77)(26, "label");
+    i0.ɵɵelementStart(25, "div", 81)(26, "label");
     i0.ɵɵtext(27, "Total Prompt Iterations");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(28, "span");
@@ -533,150 +545,150 @@ function AIAgentRunFormComponentExtended_div_55_ng_template_9_Template(rf, ctx)
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r0.record.TotalPromptIterations != null ? i0.ɵɵpipeBind2(30, 17, ctx_r0.record.TotalPromptIterations, "1.0-0") : "N/A");
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 87);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 91);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedResult)("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Loading result data... ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 87)(2, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Conditional_2_Template, 3, 0, "div", 88);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 91)(2, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Conditional_2_Template, 3, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 1 : 2);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 85);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_ng_template_1_Template, 3, 1, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 89);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_ng_template_1_Template, 3, 1, "ng-template", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 87);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 91);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedStartingPayload)("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Loading payload data... ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 87)(2, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Conditional_2_Template, 3, 0, "div", 88);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 91)(2, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Conditional_2_Template, 3, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 1 : 2);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 89);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_ng_template_1_Template, 3, 1, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 93);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_ng_template_1_Template, 3, 1, "ng-template", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 87);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 91);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedData)("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Loading execution data... ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 87)(2, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Conditional_2_Template, 3, 0, "div", 88);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 91)(2, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Conditional_2_Template, 3, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 1 : 2);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 90);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_ng_template_1_Template, 3, 1, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 94);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_ng_template_1_Template, 3, 1, "ng-template", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-code-editor", 87);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-code-editor", 91);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngModel", ctx_r0.parsedFinalPayload)("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Loading final payload data... ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 87)(2, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Conditional_2_Template, 3, 0, "div", 88);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Conditional_1_Template, 1, 3, "mj-code-editor", 91)(2, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Conditional_2_Template, 3, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 1 : 2);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 91);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_ng_template_1_Template, 3, 1, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 95);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_ng_template_1_Template, 3, 1, "ng-template", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-deep-diff", 94);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-deep-diff", 98);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("oldValue", ctx_r0.startingPayloadObject)("newValue", ctx_r0.finalPayloadObject)("title", "")("showSummary", true)("showUnchanged", false)("expandAll", false)("maxDepth", 10)("maxStringLength", 200)("treatNullAsUndefined", true);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "i", 47);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Loading payload diff... ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Conditional_1_Template, 1, 9, "mj-deep-diff", 94)(2, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Conditional_2_Template, 3, 0, "div", 88);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Conditional_1_Template, 1, 9, "mj-deep-diff", 98)(2, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Conditional_2_Template, 3, 0, "div", 92);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isParsingComplete ? 1 : 2);
 } }
-function AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 92);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_ng_template_1_Template, 3, 1, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 96);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_ng_template_1_Template, 3, 1, "ng-template", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponentExtended_div_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "kendo-panelbar", 65)(2, "kendo-panelbar-item", 66);
-    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_55_ng_template_3_Template, 31, 9, "ng-template", 67);
+function AIAgentRunFormComponentExtended_div_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "kendo-panelbar", 69)(2, "kendo-panelbar-item", 70);
+    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_56_ng_template_3_Template, 31, 9, "ng-template", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-panelbar-item", 68);
-    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_55_ng_template_5_Template, 18, 5, "ng-template", 67);
+    i0.ɵɵelementStart(4, "kendo-panelbar-item", 72);
+    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_56_ng_template_5_Template, 18, 5, "ng-template", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "kendo-panelbar-item", 69);
-    i0.ɵɵtemplate(7, AIAgentRunFormComponentExtended_div_55_ng_template_7_Template, 14, 5, "ng-template", 67);
+    i0.ɵɵelementStart(6, "kendo-panelbar-item", 73);
+    i0.ɵɵtemplate(7, AIAgentRunFormComponentExtended_div_56_ng_template_7_Template, 14, 5, "ng-template", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "kendo-panelbar-item", 70);
-    i0.ɵɵtemplate(9, AIAgentRunFormComponentExtended_div_55_ng_template_9_Template, 31, 20, "ng-template", 67);
+    i0.ɵɵelementStart(8, "kendo-panelbar-item", 74);
+    i0.ɵɵtemplate(9, AIAgentRunFormComponentExtended_div_56_ng_template_9_Template, 31, 20, "ng-template", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_10_Template, 2, 0, "kendo-panelbar-item", 71)(11, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_11_Template, 2, 0, "kendo-panelbar-item", 72)(12, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_12_Template, 2, 0, "kendo-panelbar-item", 73)(13, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_13_Template, 2, 0, "kendo-panelbar-item", 74)(14, AIAgentRunFormComponentExtended_div_55_kendo_panelbar_item_14_Template, 2, 0, "kendo-panelbar-item", 75);
+    i0.ɵɵtemplate(10, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_10_Template, 2, 0, "kendo-panelbar-item", 75)(11, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_11_Template, 2, 0, "kendo-panelbar-item", 76)(12, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_12_Template, 2, 0, "kendo-panelbar-item", 77)(13, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_13_Template, 2, 0, "kendo-panelbar-item", 78)(14, AIAgentRunFormComponentExtended_div_56_kendo_panelbar_item_14_Template, 2, 0, "kendo-panelbar-item", 79);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -696,10 +708,12 @@ function AIAgentRunFormComponentExtended_div_55_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("ngIf", ctx_r0.showPayloadDiff);
 } }
 let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended extends AIAgentRunFormComponent {
-    constructor(elementRef, sharedService, router, route, cdr, costService) {
+    constructor(elementRef, sharedService, router, route, cdr, costService, navigationService, appManager) {
         super(elementRef, sharedService, router, route, cdr);
         this.router = router;
         this.costService = costService;
+        this.navigationService = navigationService;
+        this.appManager = appManager;
         this.destroy$ = new Subject();
         // UI state
         this.activeTab = 'timeline';
@@ -825,6 +839,21 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
     navigateToEntityRecord(event) {
         SharedService.Instance.OpenEntityRecord(event.entityName, CompositeKey.FromID(event.recordId));
     }
+    /**
+     * Navigate to the conversation in the Chat application
+     */
+    navigateToConversation() {
+        if (!this.record?.ConversationID)
+            return;
+        // Find the Chat app
+        const chatApp = this.appManager.GetAllApps().find(app => app.Name === 'Chat');
+        if (!chatApp) {
+            console.warn('Chat application not found');
+            return;
+        }
+        // Navigate to the Conversations nav item with the conversationId parameter
+        this.navigationService.OpenNavItemByName('Conversations', { conversationId: this.record.ConversationID }, chatApp.ID);
+    }
     refreshData() {
         // Reload the agent run record to get latest status
         if (this.record?.ID) {
@@ -1215,7 +1244,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             return null;
         }
     }
-    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)); }; }
+    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), i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i4.ApplicationManager)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunFormComponentExtended, selectors: [["mj-ai-agent-run-form"]], viewQuery: function AIAgentRunFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(AIAgentRunTimelineComponent, 5);
             i0.ɵɵviewQuery(AIAgentRunAnalyticsComponent, 5);
@@ -1225,7 +1254,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timelineComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.analyticsComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.visualizationComponent = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 56, vars: 32, consts: [["visualizationComponent", ""], ["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], ["class", "agent-logo", 3, "src", "alt", 4, "ngIf"], ["class", "fas", 3, "ngClass", 4, "ngIf"], ["class", "fas fa-robot", 4, "ngIf"], [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"], ["class", "configuration-bar", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-diagram-project"], [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-logo", 3, "src", "alt"], [1, "fas", "fa-robot"], [1, "agent-name"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [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, "configuration-bar"], [1, "config-item"], [1, "fas", "fa-cog"], [1, "config-content"], [1, "config-label"], [1, "config-value"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "agentRunCompleted", "aiAgentRunId", "dataHelper", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem"], [3, "aiAgentRunId", "dataHelper", 4, "ngIf"], [3, "aiAgentRunId", "dataHelper"], [3, "agentRunId", 4, "ngIf"], [3, "agentRunId"], [1, "tab-content"], [3, "keepItemContent"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Settings"], ["title", "Execution Status"], ["title", "Usage & Cost"], ["title", "Result", 4, "ngIf"], ["title", "Starting Payload", 4, "ngIf"], ["title", "Execution Data", 4, "ngIf"], ["title", "Final Payload", 4, "ngIf"], ["title", "Payload Diff", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", "class", "entity-link", 3, "click", 4, "ngIf"], [4, "ngIf"], [1, "success"], [1, "error-message"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [2, "padding", "20px", "text-align", "center", "color", "#666"], ["title", "Starting Payload"], ["title", "Execution Data"], ["title", "Final Payload"], ["title", "Payload Diff"], [2, "padding", "20px", "background", "#f8f9fa"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"]], template: function AIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 57, vars: 33, consts: [["visualizationComponent", ""], ["analyticsComponent", ""], [1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], ["class", "agent-logo", 3, "src", "alt", 4, "ngIf"], ["class", "fas", 3, "ngClass", 4, "ngIf"], ["class", "fas fa-robot", 4, "ngIf"], [1, "header-info"], [1, "meta-info"], ["class", "agent-name", 4, "ngIf"], [1, "run-id"], ["class", "parent-run", 4, "ngIf"], ["class", "conversation-pill", "title", "Open conversation in Chat app", 3, "click", 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"], ["class", "configuration-bar", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-diagram-project"], [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-logo", 3, "src", "alt"], [1, "fas", "fa-robot"], [1, "agent-name"], ["href", "javascript:void(0)", 1, "entity-link", 3, "click"], [1, "parent-run"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], ["title", "Open conversation in Chat app", 1, "conversation-pill", 3, "click"], [1, "fas", "fa-comments"], [1, "fas", "fa-external-link-alt", "pill-action"], ["class", "value", 4, "ngIf"], ["class", "value loading", 4, "ngIf"], [1, "value", "loading"], [1, "fas", "fa-spinner", "fa-spin"], [1, "configuration-bar"], [1, "config-item"], [1, "fas", "fa-cog"], [1, "config-content"], [1, "config-label"], [1, "config-value"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "agentRunCompleted", "aiAgentRunId", "dataHelper", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], [3, "closePanel", "navigateToActionLog", "copyToClipboard", "selectedTimelineItem"], [3, "aiAgentRunId", "dataHelper", 4, "ngIf"], [3, "aiAgentRunId", "dataHelper"], [3, "agentRunId", 4, "ngIf"], [3, "agentRunId"], [1, "tab-content"], [3, "keepItemContent"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Settings"], ["title", "Execution Status"], ["title", "Usage & Cost"], ["title", "Result", 4, "ngIf"], ["title", "Starting Payload", 4, "ngIf"], ["title", "Execution Data", 4, "ngIf"], ["title", "Final Payload", 4, "ngIf"], ["title", "Payload Diff", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["href", "javascript:void(0)", "class", "entity-link", 3, "click", 4, "ngIf"], [4, "ngIf"], [1, "success"], [1, "error-message"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [2, "padding", "20px", "text-align", "center", "color", "#666"], ["title", "Starting Payload"], ["title", "Execution Data"], ["title", "Final Payload"], ["title", "Payload Diff"], [2, "padding", "20px", "background", "#f8f9fa"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"]], template: function AIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "div", 6)(5, "div", 7);
             i0.ɵɵtemplate(6, AIAgentRunFormComponentExtended_img_6_Template, 1, 2, "img", 8)(7, AIAgentRunFormComponentExtended_i_7_Template, 1, 1, "i", 9)(8, AIAgentRunFormComponentExtended_i_8_Template, 1, 0, "i", 10);
             i0.ɵɵelementEnd();
@@ -1237,49 +1266,49 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             i0.ɵɵelementStart(14, "span", 14);
             i0.ɵɵtext(15);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(16, AIAgentRunFormComponentExtended_span_16_Template, 4, 0, "span", 15);
+            i0.ɵɵtemplate(16, AIAgentRunFormComponentExtended_span_16_Template, 4, 0, "span", 15)(17, AIAgentRunFormComponentExtended_span_17_Template, 5, 0, "span", 16);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(17, "div", 16)(18, "div", 17);
-            i0.ɵɵelement(19, "i", 18);
-            i0.ɵɵtext(20);
+            i0.ɵɵelementStart(18, "div", 17)(19, "div", 18);
+            i0.ɵɵelement(20, "i", 19);
+            i0.ɵɵtext(21);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div", 19)(22, "button", 20);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_22_listener() { return ctx.refreshData(); });
-            i0.ɵɵelement(23, "i", 21);
+            i0.ɵɵelementStart(22, "div", 20)(23, "button", 21);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_23_listener() { return ctx.refreshData(); });
+            i0.ɵɵelement(24, "i", 22);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(24, "div", 22)(25, "div", 23)(26, "span", 24);
-            i0.ɵɵtext(27, "Started");
+            i0.ɵɵelementStart(25, "div", 23)(26, "div", 24)(27, "span", 25);
+            i0.ɵɵtext(28, "Started");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "span", 25);
-            i0.ɵɵtext(29);
-            i0.ɵɵpipe(30, "date");
+            i0.ɵɵelementStart(29, "span", 26);
+            i0.ɵɵtext(30);
+            i0.ɵɵpipe(31, "date");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(31, AIAgentRunFormComponentExtended_div_31_Template, 6, 4, "div", 26)(32, AIAgentRunFormComponentExtended_div_32_Template, 5, 1, "div", 26)(33, AIAgentRunFormComponentExtended_div_33_Template, 5, 5, "div", 26)(34, AIAgentRunFormComponentExtended_div_34_Template, 5, 2, "div", 26)(35, AIAgentRunFormComponentExtended_div_35_Template, 5, 2, "div", 26)(36, AIAgentRunFormComponentExtended_div_36_Template, 5, 1, "div", 26);
+            i0.ɵɵtemplate(32, AIAgentRunFormComponentExtended_div_32_Template, 6, 4, "div", 27)(33, AIAgentRunFormComponentExtended_div_33_Template, 5, 1, "div", 27)(34, AIAgentRunFormComponentExtended_div_34_Template, 5, 5, "div", 27)(35, AIAgentRunFormComponentExtended_div_35_Template, 5, 2, "div", 27)(36, AIAgentRunFormComponentExtended_div_36_Template, 5, 2, "div", 27)(37, AIAgentRunFormComponentExtended_div_37_Template, 5, 1, "div", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(37, AIAgentRunFormComponentExtended_div_37_Template, 9, 1, "div", 27);
+            i0.ɵɵtemplate(38, AIAgentRunFormComponentExtended_div_38_Template, 9, 1, "div", 28);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 28)(39, "button", 29);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_39_listener() { return ctx.changeTab("timeline"); });
-            i0.ɵɵelement(40, "i", 30);
-            i0.ɵɵtext(41, " Timeline ");
+            i0.ɵɵelementStart(39, "div", 29)(40, "button", 30);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_40_listener() { return ctx.changeTab("timeline"); });
+            i0.ɵɵelement(41, "i", 31);
+            i0.ɵɵtext(42, " Timeline ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "button", 29);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_42_listener() { return ctx.changeTab("visualization"); });
-            i0.ɵɵelement(43, "i", 31);
-            i0.ɵɵtext(44, " Visualization ");
+            i0.ɵɵelementStart(43, "button", 30);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_43_listener() { return ctx.changeTab("visualization"); });
+            i0.ɵɵelement(44, "i", 32);
+            i0.ɵɵtext(45, " Visualization ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "button", 29);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_45_listener() { return ctx.changeTab("analytics"); });
-            i0.ɵɵelement(46, "i", 32);
-            i0.ɵɵtext(47, " Analytics ");
+            i0.ɵɵelementStart(46, "button", 30);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_46_listener() { return ctx.changeTab("analytics"); });
+            i0.ɵɵelement(47, "i", 33);
+            i0.ɵɵtext(48, " Analytics ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "button", 29);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_48_listener() { return ctx.changeTab("details"); });
-            i0.ɵɵelement(49, "i", 33);
-            i0.ɵɵtext(50, " Details ");
+            i0.ɵɵelementStart(49, "button", 30);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_49_listener() { return ctx.changeTab("details"); });
+            i0.ɵɵelement(50, "i", 34);
+            i0.ɵɵtext(51, " Details ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(51, "div", 34);
-            i0.ɵɵtemplate(52, AIAgentRunFormComponentExtended_div_52_Template, 6, 9, "div", 35)(53, AIAgentRunFormComponentExtended_div_53_Template, 2, 1, "div", 35)(54, AIAgentRunFormComponentExtended_div_54_Template, 2, 1, "div", 35)(55, AIAgentRunFormComponentExtended_div_55_Template, 15, 7, "div", 36);
+            i0.ɵɵelementStart(52, "div", 35);
+            i0.ɵɵtemplate(53, AIAgentRunFormComponentExtended_div_53_Template, 6, 9, "div", 36)(54, AIAgentRunFormComponentExtended_div_54_Template, 2, 1, "div", 36)(55, AIAgentRunFormComponentExtended_div_55_Template, 2, 1, "div", 36)(56, AIAgentRunFormComponentExtended_div_56_Template, 15, 7, "div", 37);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
@@ -1294,6 +1323,8 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             i0.ɵɵtextInterpolate(ctx.record.ID);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record.ParentRunID);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.record.ConversationID);
             i0.ɵɵadvance(2);
             i0.ɵɵattribute("data-status", ctx.record.Status);
             i0.ɵɵadvance();
@@ -1301,7 +1332,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.record.Status, " ");
             i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(30, 29, ctx.record.StartedAt, "medium"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(31, 30, ctx.record.StartedAt, "medium"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.record.CompletedAt);
             i0.ɵɵadvance();
@@ -1332,7 +1363,7 @@ let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended exte
             i0.ɵɵproperty("ngIf", ctx.activeTab === "analytics");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.activeTab === "details");
-        } }, 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, i11.AIAgentRunVisualizationComponent, i12.AIAgentRunStepDetailComponent, 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  overflow: hidden;\n}\n\n.agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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\n\n.configuration-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n  margin-top: 16px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: #6c757d;\n  width: 24px;\n  text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%] {\n  color: #007bff;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%]:hover {\n  color: #0056b3;\n  text-decoration: underline;\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 - 390px);\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}"] }); }
+        } }, dependencies: [i5.NgClass, i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.PanelBarComponent, i7.PanelBarItemComponent, i7.PanelBarContentDirective, i7.SplitterComponent, i7.SplitterPaneComponent, i8.CodeEditorComponent, i9.DeepDiffComponent, i10.AIAgentRunTimelineComponent, i11.AIAgentRunAnalyticsComponent, i12.AIAgentRunVisualizationComponent, i13.AIAgentRunStepDetailComponent, i5.DecimalPipe, i5.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%], \n.ai-agent-run-form[_ngcontent-%COMP%]    > .record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\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  flex-shrink: 0;\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  overflow: hidden;\n}\n\n.agent-logo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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\n\n.conversation-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(171, 71, 188, 0.08));\n  border: 1px solid rgba(156, 39, 176, 0.2);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #9c27b0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(171, 71, 188, 0.15));\n  border-color: rgba(156, 39, 176, 0.4);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);\n}\n\n.conversation-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill[_ngcontent-%COMP%]   .pill-action[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill[_ngcontent-%COMP%]:hover   .pill-action[_ngcontent-%COMP%] {\n  opacity: 1;\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\n\n.configuration-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n  margin-top: 16px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: #6c757d;\n  width: 24px;\n  text-align: center;\n}\n\n.config-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%] {\n  color: #007bff;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value[_ngcontent-%COMP%]   .entity-link[_ngcontent-%COMP%]:hover {\n  color: #0056b3;\n  text-decoration: underline;\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  flex-shrink: 0;\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  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\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}"] }); }
 };
 AIAgentRunFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
@@ -1340,8 +1371,8 @@ AIAgentRunFormComponentExtended = __decorate([
 export { AIAgentRunFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFormComponentExtended, [{
         type: Component,
-        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            <img *ngIf=\"agent && agent.LogoURL\" [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            <i *ngIf=\"agent && !agent.LogoURL && agent.IconClass\" class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            <i *ngIf=\"!agent || (!agent.LogoURL && !agent.IconClass)\" 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\">\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n                  {{ agent.Name }}\n                </a>\n              </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 class=\"stat\" *ngIf=\"record.EffortLevel\">\n          <span class=\"label\">Effort Level</span>\n          <span class=\"value\">{{ record.EffortLevel }}</span>\n        </div>\n      </div>\n      \n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      <div class=\"configuration-bar\" *ngIf=\"record.ConfigurationID\">\n        <div class=\"config-item\">\n          <i class=\"fas fa-cog\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Configuration</div>\n            <div class=\"config-value\">\n              <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n                {{ record.Configuration || 'Unknown' }}\n              </a>\n            </div>\n          </div>\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 === 'visualization'\" (click)=\"changeTab('visualization')\">\n        <i class=\"fas fa-diagram-project\"></i> Visualization\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              [dataHelper]=\"dataHelper\"\n              [autoRefresh]=\"record.Status === 'Running'\"\n              [refreshInterval]=\"30000\"\n              (itemSelected)=\"selectTimelineItem($event)\"\n              (navigateToEntity)=\"navigateToEntityRecord($event)\"\n              (agentRunCompleted)=\"onAgentRunCompleted($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            <mj-ai-agent-run-step-detail\n              [selectedTimelineItem]=\"selectedTimelineItem\"\n              (closePanel)=\"closeJsonPanel()\"\n              (navigateToActionLog)=\"navigateToActionLog($event)\"\n              (copyToClipboard)=\"copyToClipboard($event)\">\n            </mj-ai-agent-run-step-detail>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      </div>\n\n      <!-- Visualization Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'visualization'\" style=\"height: 100%;\">\n        <mj-ai-agent-run-visualization\n          #visualizationComponent\n          [aiAgentRunId]=\"record.ID\"\n          [dataHelper]=\"dataHelper\"\n          *ngIf=\"visualizationLoaded\">\n        </mj-ai-agent-run-visualization>\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 [keepItemContent]=\"true\">\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 Settings\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Override Model</label>\n                  <span>\n                    <a *ngIf=\"record.OverrideModelID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Models', record.OverrideModelID)\">\n                      {{ record.OverrideModel || 'N/A' }}\n                    </a>\n                    <span *ngIf=\"!record.OverrideModelID\">N/A</span>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Override Vendor</label>\n                  <span>\n                    <a *ngIf=\"record.OverrideVendorID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Vendors', record.OverrideVendorID)\">\n                      {{ record.OverrideVendor || 'N/A' }}\n                    </a>\n                    <span *ngIf=\"!record.OverrideVendorID\">N/A</span>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Verbose Logging</label>\n                  <span>{{ record.Verbose ? 'Yes' : 'No' }}</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                  @if (record.Success === null) {\n                    <span>In Progress</span>\n                  }\n                  @else if (record.Success) {\n                    <span class=\"success\">Yes</span>\n                  }\n                  @else {\n                    <span class=\"error-message\">No</span>\n                  }\n                </div>\n                <div class=\"detail-item full-width\" *ngIf=\"record.Message\">\n                  <label>Message</label>\n                  <div class=\"message\">{{ record.Message }}</div>\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedResult\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n                  </div>\n                }\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedStartingPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n                  </div>\n                }\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Execution Data\" *ngIf=\"record.Data\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedData\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n                  </div>\n                }\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedFinalPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n                  </div>\n                }\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                @if (isParsingComplete) {\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                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n                  </div>\n                }\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  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n  margin-top: 16px;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item > i {\n  font-size: 1.2em;\n  color: #6c757d;\n  width: 24px;\n  text-align: center;\n}\n\n.config-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.config-value .entity-link {\n  color: #007bff;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: #0056b3;\n  text-decoration: underline;\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 - 390px);\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}"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.AIAgentRunCostService }], { timelineComponent: [{
+        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            <img *ngIf=\"agent && agent.LogoURL\" [src]=\"agent.LogoURL\" [alt]=\"agent.Name || 'Agent'\" class=\"agent-logo\" />\n            <i *ngIf=\"agent && !agent.LogoURL && agent.IconClass\" class=\"fas\" [ngClass]=\"agent.IconClass\"></i>\n            <i *ngIf=\"!agent || (!agent.LogoURL && !agent.IconClass)\" 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\">\n                <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Agents', record.AgentID)\">\n                  {{ agent.Name }}\n                </a>\n              </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              <!-- Conversation Link Pill -->\n              <span class=\"conversation-pill\" *ngIf=\"record.ConversationID\" (click)=\"navigateToConversation()\" title=\"Open conversation in Chat app\">\n                <i class=\"fas fa-comments\"></i>\n                <span>Conversation</span>\n                <i class=\"fas fa-external-link-alt pill-action\"></i>\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 class=\"stat\" *ngIf=\"record.EffortLevel\">\n          <span class=\"label\">Effort Level</span>\n          <span class=\"value\">{{ record.EffortLevel }}</span>\n        </div>\n      </div>\n      \n      <!-- Configuration Bar (shown below header stats when ConfigurationID exists) -->\n      <div class=\"configuration-bar\" *ngIf=\"record.ConfigurationID\">\n        <div class=\"config-item\">\n          <i class=\"fas fa-cog\"></i>\n          <div class=\"config-content\">\n            <div class=\"config-label\">Configuration</div>\n            <div class=\"config-value\">\n              <a href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('MJ: AI Configurations', record.ConfigurationID)\">\n                {{ record.Configuration || 'Unknown' }}\n              </a>\n            </div>\n          </div>\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 === 'visualization'\" (click)=\"changeTab('visualization')\">\n        <i class=\"fas fa-diagram-project\"></i> Visualization\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              [dataHelper]=\"dataHelper\"\n              [autoRefresh]=\"record.Status === 'Running'\"\n              [refreshInterval]=\"30000\"\n              (itemSelected)=\"selectTimelineItem($event)\"\n              (navigateToEntity)=\"navigateToEntityRecord($event)\"\n              (agentRunCompleted)=\"onAgentRunCompleted($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            <mj-ai-agent-run-step-detail\n              [selectedTimelineItem]=\"selectedTimelineItem\"\n              (closePanel)=\"closeJsonPanel()\"\n              (navigateToActionLog)=\"navigateToActionLog($event)\"\n              (copyToClipboard)=\"copyToClipboard($event)\">\n            </mj-ai-agent-run-step-detail>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      </div>\n\n      <!-- Visualization Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'visualization'\" style=\"height: 100%;\">\n        <mj-ai-agent-run-visualization\n          #visualizationComponent\n          [aiAgentRunId]=\"record.ID\"\n          [dataHelper]=\"dataHelper\"\n          *ngIf=\"visualizationLoaded\">\n        </mj-ai-agent-run-visualization>\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 [keepItemContent]=\"true\">\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 Settings\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Override Model</label>\n                  <span>\n                    <a *ngIf=\"record.OverrideModelID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Models', record.OverrideModelID)\">\n                      {{ record.OverrideModel || 'N/A' }}\n                    </a>\n                    <span *ngIf=\"!record.OverrideModelID\">N/A</span>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Override Vendor</label>\n                  <span>\n                    <a *ngIf=\"record.OverrideVendorID\" href=\"javascript:void(0)\" class=\"entity-link\" (click)=\"openEntityRecord('AI Vendors', record.OverrideVendorID)\">\n                      {{ record.OverrideVendor || 'N/A' }}\n                    </a>\n                    <span *ngIf=\"!record.OverrideVendorID\">N/A</span>\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Verbose Logging</label>\n                  <span>{{ record.Verbose ? 'Yes' : 'No' }}</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                  @if (record.Success === null) {\n                    <span>In Progress</span>\n                  }\n                  @else if (record.Success) {\n                    <span class=\"success\">Yes</span>\n                  }\n                  @else {\n                    <span class=\"error-message\">No</span>\n                  }\n                </div>\n                <div class=\"detail-item full-width\" *ngIf=\"record.Message\">\n                  <label>Message</label>\n                  <div class=\"message\">{{ record.Message }}</div>\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedResult\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading result data...\n                  </div>\n                }\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedStartingPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload data...\n                  </div>\n                }\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Execution Data\" *ngIf=\"record.Data\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"result-viewer\">\n                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedData\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading execution data...\n                  </div>\n                }\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                @if (isParsingComplete) {\n                  <mj-code-editor\n                    [ngModel]=\"parsedFinalPayload\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: 300px; width: 100%;\">\n                  </mj-code-editor>\n                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading final payload data...\n                  </div>\n                }\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                @if (isParsingComplete) {\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                } @else {\n                  <div style=\"padding: 20px; text-align: center; color: #666;\">\n                    <i class=\"fas fa-spinner fa-spin\"></i> Loading payload diff...\n                  </div>\n                }\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  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.record-form-container.ai-agent-run-form > .record-form,\n.ai-agent-run-form > .record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\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  flex-shrink: 0;\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  overflow: hidden;\n}\n\n.agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\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/* Conversation Link Pill */\n.conversation-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(171, 71, 188, 0.08));\n  border: 1px solid rgba(156, 39, 176, 0.2);\n  border-radius: 16px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #9c27b0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  white-space: nowrap;\n}\n\n.conversation-pill:hover {\n  background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(171, 71, 188, 0.15));\n  border-color: rgba(156, 39, 176, 0.4);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);\n}\n\n.conversation-pill i:first-child {\n  font-size: 11px;\n  opacity: 0.9;\n}\n\n.conversation-pill .pill-action {\n  font-size: 9px;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n}\n\n.conversation-pill:hover .pill-action {\n  opacity: 1;\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/* Configuration Bar */\n.configuration-bar {\n  display: flex;\n  gap: 24px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n  margin-top: 16px;\n}\n\n.config-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.config-item > i {\n  font-size: 1.2em;\n  color: #6c757d;\n  width: 24px;\n  text-align: center;\n}\n\n.config-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.config-label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.config-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.config-value .entity-link {\n  color: #007bff;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.config-value .entity-link:hover {\n  color: #0056b3;\n  text-decoration: underline;\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  flex-shrink: 0;\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  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  background: white;\n}\n\n.tab-content {\n  height: 100%;\n  min-height: 0;\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}"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.AIAgentRunCostService }, { type: i1.NavigationService }, { type: i4.ApplicationManager }], { timelineComponent: [{
             type: ViewChild,
             args: [AIAgentRunTimelineComponent]
         }], analyticsComponent: [{
@@ -1351,7 +1382,7 @@ export { AIAgentRunFormComponentExtended };
             type: ViewChild,
             args: [AIAgentRunVisualizationComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponentExtended, { className: "AIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponentExtended, { className: "AIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 24 }); })();
 // Loader function for AIAgentRunFormComponent
 export function LoadAIAgentRunFormComponent() {
     // This function is called to ensure the form is loaded