@memberjunction/ng-core-entity-forms 2.54.0 → 2.55.0

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

@@ -10,6 +10,7 @@ import { CompositeKey, Metadata } from '@memberjunction/core';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { RegisterClass } from '@memberjunction/global';
 import { SharedService } from '@memberjunction/ng-shared';
+import { AIAgentRunFormComponent } from '../../generated/Entities/AIAgentRun/aiagentrun.form.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
@@ -18,7 +19,7 @@ import * as i4 from "@angular/forms";
 import * as i5 from "@progress/kendo-angular-layout";
 import * as i6 from "@memberjunction/ng-code-editor";
 import * as i7 from "./ai-agent-run-timeline.component";
-function AIAgentRunFormComponent_span_11_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_span_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 30);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -27,16 +28,16 @@ function AIAgentRunFormComponent_span_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.agent.Name);
 } }
-function AIAgentRunFormComponent_span_14_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_span_14_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementStart(2, "a", 33);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponent_span_14_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToParentRun()); });
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_span_14_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToParentRun()); });
     i0.ɵɵtext(3, "Parent Run");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentRunFormComponent_div_29_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2, "Completed");
     i0.ɵɵelementEnd();
@@ -49,7 +50,7 @@ function AIAgentRunFormComponent_div_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r0.record.CompletedAt, "medium"));
 } }
-function AIAgentRunFormComponent_div_30_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2, "Duration");
     i0.ɵɵelementEnd();
@@ -61,7 +62,7 @@ function AIAgentRunFormComponent_div_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.calculateDuration(ctx_r0.record.StartedAt, ctx_r0.record.CompletedAt));
 } }
-function AIAgentRunFormComponent_div_31_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2, "Result");
     i0.ɵɵelementEnd();
@@ -75,22 +76,48 @@ function AIAgentRunFormComponent_div_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.record.Success ? "Success" : "Failed", " ");
 } }
-function AIAgentRunFormComponent_div_40_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵtext(2, "Tokens");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r0.record.TotalTokensUsed, "1.0-0"));
+} }
+function AIAgentRunFormComponentExtended_div_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵtext(2, "Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "number");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("$", i0.ɵɵpipeBind2(5, 1, ctx_r0.record.TotalCost, "1.2-4"), "");
+} }
+function AIAgentRunFormComponentExtended_div_42_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 54)(1, "button", 55);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponent_div_40_div_5_div_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.navigateToActionLog(ctx_r0.selectedTimelineItem.data.ID)); });
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_42_div_5_div_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.navigateToActionLog(ctx_r0.selectedTimelineItem.data.ID)); });
     i0.ɵɵelement(2, "i", 56);
     i0.ɵɵtext(3, " View Action Execution Log ");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentRunFormComponent_div_40_div_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_42_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 40)(1, "div", 41)(2, "h3");
     i0.ɵɵelement(3, "i", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "button", 42);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponent_div_40_div_5_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); });
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_42_div_5_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeJsonPanel()); });
     i0.ɵɵelement(6, "i", 43);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 44)(8, "div", 45)(9, "div", 46)(10, "label");
@@ -111,13 +138,13 @@ function AIAgentRunFormComponent_div_40_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(24, AIAgentRunFormComponent_div_40_div_5_div_24_Template, 4, 0, "div", 48);
+    i0.ɵɵtemplate(24, AIAgentRunFormComponentExtended_div_42_div_5_div_24_Template, 4, 0, "div", 48);
     i0.ɵɵelementStart(25, "div", 49)(26, "div", 50)(27, "button", 51);
-    i0.ɵɵlistener("click", function AIAgentRunFormComponent_div_40_div_5_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.getSelectedItemJson())); });
+    i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_div_42_div_5_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.getSelectedItemJson())); });
     i0.ɵɵelement(28, "i", 52);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(29, "mj-code-editor", 53);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponent_div_40_div_5_Template_mj_code_editor_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedItemJsonString, $event) || (ctx_r0.selectedItemJsonString = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponentExtended_div_42_div_5_Template_mj_code_editor_ngModelChange_29_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedItemJsonString, $event) || (ctx_r0.selectedItemJsonString = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -139,13 +166,13 @@ function AIAgentRunFormComponent_div_40_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedItemJsonString);
     i0.ɵɵproperty("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponent_div_40_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_42_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 34)(1, "kendo-splitter", 35)(2, "kendo-splitter-pane", 36)(3, "mj-ai-agent-run-timeline", 37);
-    i0.ɵɵlistener("itemSelected", function AIAgentRunFormComponent_div_40_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function AIAgentRunFormComponent_div_40_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
+    i0.ɵɵlistener("itemSelected", function AIAgentRunFormComponentExtended_div_42_Template_mj_ai_agent_run_timeline_itemSelected_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectTimelineItem($event)); })("navigateToEntity", function AIAgentRunFormComponentExtended_div_42_Template_mj_ai_agent_run_timeline_navigateToEntity_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToEntityRecord($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(4, "kendo-splitter-pane", 38);
-    i0.ɵɵtemplate(5, AIAgentRunFormComponent_div_40_div_5_Template, 30, 10, "div", 39);
+    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_42_div_5_Template, 30, 10, "div", 39);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -158,38 +185,38 @@ function AIAgentRunFormComponent_div_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.selectedTimelineItem);
 } }
-function AIAgentRunFormComponent_div_41_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64)(2, "label");
+function AIAgentRunFormComponentExtended_div_43_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 65)(2, "label");
     i0.ɵɵtext(3, "Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 64)(7, "label");
+    i0.ɵɵelementStart(6, "div", 65)(7, "label");
     i0.ɵɵtext(8, "Agent ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 64)(12, "label");
+    i0.ɵɵelementStart(11, "div", 65)(12, "label");
     i0.ɵɵtext(13, "Agent Name");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 64)(17, "label");
+    i0.ɵɵelementStart(16, "div", 65)(17, "label");
     i0.ɵɵtext(18, "Parent Run ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(19, "span");
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 64)(22, "label");
+    i0.ɵɵelementStart(21, "div", 65)(22, "label");
     i0.ɵɵtext(23, "Conversation ID");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(24, "span");
     i0.ɵɵtext(25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "div", 64)(27, "label");
+    i0.ɵɵelementStart(26, "div", 65)(27, "label");
     i0.ɵɵtext(28, "User");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(29, "span");
@@ -210,11 +237,11 @@ function AIAgentRunFormComponent_div_41_ng_template_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r0.record.User || "N/A");
 } }
-function AIAgentRunFormComponent_div_41_ng_template_5_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66)(1, "label");
+function AIAgentRunFormComponentExtended_div_43_ng_template_5_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "label");
     i0.ɵɵtext(2, "Error Message");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 67);
+    i0.ɵɵelementStart(3, "div", 68);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -222,20 +249,20 @@ function AIAgentRunFormComponent_div_41_ng_template_5_div_11_Template(rf, ctx) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.record.ErrorMessage);
 } }
-function AIAgentRunFormComponent_div_41_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64)(2, "label");
+function AIAgentRunFormComponentExtended_div_43_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 65)(2, "label");
     i0.ɵɵtext(3, "Status");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span", 13);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 64)(7, "label");
+    i0.ɵɵelementStart(6, "div", 65)(7, "label");
     i0.ɵɵtext(8, "Success");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, AIAgentRunFormComponent_div_41_ng_template_5_div_11_Template, 5, 1, "div", 65);
+    i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_div_43_ng_template_5_div_11_Template, 5, 1, "div", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -250,10 +277,50 @@ function AIAgentRunFormComponent_div_41_ng_template_5_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.record.ErrorMessage);
 } }
-function AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_43_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64)(1, "div", 65)(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", 65)(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", 65)(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", 65)(20, "label");
+    i0.ɵɵtext(21, "Total Cost");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23);
+    i0.ɵɵpipe(24, "number");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.record.TotalTokensUsed ? i0.ɵɵpipeBind2(6, 4, ctx_r0.record.TotalTokensUsed, "1.0-0") : "N/A");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.record.TotalPromptTokensUsed ? i0.ɵɵpipeBind2(12, 7, ctx_r0.record.TotalPromptTokensUsed, "1.0-0") : "N/A");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.record.TotalCompletionTokensUsed ? i0.ɵɵpipeBind2(18, 10, ctx_r0.record.TotalCompletionTokensUsed, "1.0-0") : "N/A");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.record.TotalCost != null ? "$" + i0.ɵɵpipeBind2(24, 13, ctx_r0.record.TotalCost, "1.2-4") : "N/A");
+} }
+function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69)(1, "mj-code-editor", 70);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_ng_template_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Result, $event) || (ctx_r0.record.Result = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 70)(1, "mj-code-editor", 71);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_8_ng_template_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.record.Result, $event) || (ctx_r0.record.Result = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -261,15 +328,15 @@ function AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_ng_template_1_Temp
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.Result);
     i0.ɵɵproperty("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 68);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_ng_template_1_Template, 2, 3, "ng-template", 59);
+function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 69);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_8_ng_template_1_Template, 2, 3, "ng-template", 59);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 72)(1, "mj-code-editor", 73);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_ng_template_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.record.AgentState, $event) || (ctx_r0.record.AgentState = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 73)(1, "mj-code-editor", 74);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_9_ng_template_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.record.AgentState, $event) || (ctx_r0.record.AgentState = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -277,30 +344,33 @@ function AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_ng_template_1_Temp
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.record.AgentState);
     i0.ɵɵproperty("language", "json")("readonly", true);
 } }
-function AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 71);
-    i0.ɵɵtemplate(1, AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_ng_template_1_Template, 2, 3, "ng-template", 59);
+function AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 72);
+    i0.ɵɵtemplate(1, AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_9_ng_template_1_Template, 2, 3, "ng-template", 59);
     i0.ɵɵelementEnd();
 } }
-function AIAgentRunFormComponent_div_41_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunFormComponentExtended_div_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 57)(1, "kendo-panelbar")(2, "kendo-panelbar-item", 58);
-    i0.ɵɵtemplate(3, AIAgentRunFormComponent_div_41_ng_template_3_Template, 31, 6, "ng-template", 59);
+    i0.ɵɵtemplate(3, AIAgentRunFormComponentExtended_div_43_ng_template_3_Template, 31, 6, "ng-template", 59);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "kendo-panelbar-item", 60);
-    i0.ɵɵtemplate(5, AIAgentRunFormComponent_div_41_ng_template_5_Template, 12, 8, "ng-template", 59);
+    i0.ɵɵtemplate(5, AIAgentRunFormComponentExtended_div_43_ng_template_5_Template, 12, 8, "ng-template", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentRunFormComponent_div_41_kendo_panelbar_item_6_Template, 2, 0, "kendo-panelbar-item", 61)(7, AIAgentRunFormComponent_div_41_kendo_panelbar_item_7_Template, 2, 0, "kendo-panelbar-item", 62);
+    i0.ɵɵelementStart(6, "kendo-panelbar-item", 61);
+    i0.ɵɵtemplate(7, AIAgentRunFormComponentExtended_div_43_ng_template_7_Template, 25, 16, "ng-template", 59);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_8_Template, 2, 0, "kendo-panelbar-item", 62)(9, AIAgentRunFormComponentExtended_div_43_kendo_panelbar_item_9_Template, 2, 0, "kendo-panelbar-item", 63);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("expanded", true);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(6);
     i0.ɵɵproperty("ngIf", ctx_r0.record.Result);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.record.AgentState);
 } }
-let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComponent {
+let AIAgentRunFormComponentExtended = class AIAgentRunFormComponentExtended extends AIAgentRunFormComponent {
     constructor(elementRef, sharedService, router, route, cdr) {
         super(elementRef, sharedService, router, route, cdr);
         this.router = router;
@@ -402,8 +472,8 @@ let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComp
             console.error('Failed to copy to clipboard:', err);
         }
     }
-    static { this.ɵfac = function AIAgentRunFormComponent_Factory(t) { return new (t || AIAgentRunFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunFormComponent, selectors: [["mj-ai-agent-run-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 42, vars: 19, consts: [[1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], ["class", "agent-name", 4, "ngIf"], [1, "run-id"], ["class", "parent-run", 4, "ngIf"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], ["class", "stat", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["class", "tab-content", "style", "height: 100%;", 4, "ngIf"], ["class", "tab-content", 4, "ngIf"], [1, "agent-name"], [1, "parent-run"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], ["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "json-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "height", "calc(100% - 160px)", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "tab-content"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Status"], ["title", "Result", 4, "ngIf"], ["title", "Agent State", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "error-message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], ["title", "Agent State"], [1, "state-viewer"], [2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"]], template: function AIAgentRunFormComponent_Template(rf, ctx) { if (rf & 1) {
+    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)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunFormComponentExtended, selectors: [["mj-ai-agent-run-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 21, consts: [[1, "record-form-container", "ai-agent-run-form"], [1, "record-form"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [1, "fas", "fa-robot"], [1, "header-info"], [1, "meta-info"], ["class", "agent-name", 4, "ngIf"], [1, "run-id"], ["class", "parent-run", 4, "ngIf"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "header-actions"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fas", "fa-sync-alt"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], ["class", "stat", 4, "ngIf"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fas", "fa-stream"], [1, "fas", "fa-info-circle"], [1, "content-area"], ["class", "tab-content", "style", "height: 100%;", 4, "ngIf"], ["class", "tab-content", 4, "ngIf"], [1, "agent-name"], [1, "parent-run"], [1, "fas", "fa-level-up-alt"], [1, "parent-link", 3, "click"], [1, "tab-content", 2, "height", "100%"], ["orientation", "horizontal", 2, "height", "100%"], [3, "min"], [3, "itemSelected", "navigateToEntity", "aiAgentRunId", "autoRefresh", "refreshInterval"], [3, "size", "min", "collapsed"], ["class", "json-detail-pane", 4, "ngIf"], [1, "json-detail-pane"], [1, "json-pane-header"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], ["class", "action-link", 4, "ngIf"], [1, "json-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "height", "calc(100% - 160px)", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "tab-content"], ["title", "General Information", 3, "expanded"], ["kendoPanelBarContent", ""], ["title", "Execution Status"], ["title", "Usage & Cost"], ["title", "Result", 4, "ngIf"], ["title", "Agent State", 4, "ngIf"], [1, "details-grid"], [1, "detail-item"], ["class", "detail-item full-width", 4, "ngIf"], [1, "detail-item", "full-width"], [1, "error-message"], ["title", "Result"], [1, "result-viewer"], [2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], ["title", "Agent State"], [1, "state-viewer"], [2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"]], template: function AIAgentRunFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div", 5);
             i0.ɵɵelement(6, "i", 6);
             i0.ɵɵelementEnd();
@@ -411,18 +481,18 @@ let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComp
             i0.ɵɵtext(9, "AI Agent Run");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "div", 8);
-            i0.ɵɵtemplate(11, AIAgentRunFormComponent_span_11_Template, 2, 1, "span", 9);
+            i0.ɵɵtemplate(11, AIAgentRunFormComponentExtended_span_11_Template, 2, 1, "span", 9);
             i0.ɵɵelementStart(12, "span", 10);
             i0.ɵɵtext(13);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(14, AIAgentRunFormComponent_span_14_Template, 4, 0, "span", 11);
+            i0.ɵɵtemplate(14, AIAgentRunFormComponentExtended_span_14_Template, 4, 0, "span", 11);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
             i0.ɵɵelement(17, "i", 14);
             i0.ɵɵtext(18);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(19, "div", 15)(20, "button", 16);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponent_Template_button_click_20_listener() { return ctx.refreshData(); });
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_20_listener() { return ctx.refreshData(); });
             i0.ɵɵelement(21, "i", 17);
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "span", 20);
@@ -432,20 +502,20 @@ let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComp
             i0.ɵɵtext(27);
             i0.ɵɵpipe(28, "date");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(29, AIAgentRunFormComponent_div_29_Template, 6, 4, "div", 22)(30, AIAgentRunFormComponent_div_30_Template, 5, 1, "div", 22)(31, AIAgentRunFormComponent_div_31_Template, 5, 5, "div", 22);
+            i0.ɵɵtemplate(29, AIAgentRunFormComponentExtended_div_29_Template, 6, 4, "div", 22)(30, AIAgentRunFormComponentExtended_div_30_Template, 5, 1, "div", 22)(31, AIAgentRunFormComponentExtended_div_31_Template, 5, 5, "div", 22)(32, AIAgentRunFormComponentExtended_div_32_Template, 6, 4, "div", 22)(33, AIAgentRunFormComponentExtended_div_33_Template, 6, 4, "div", 22);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(32, "div", 23)(33, "button", 24);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponent_Template_button_click_33_listener() { return ctx.activeTab = "timeline"; });
-            i0.ɵɵelement(34, "i", 25);
-            i0.ɵɵtext(35, " Timeline ");
+            i0.ɵɵelementStart(34, "div", 23)(35, "button", 24);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_35_listener() { return ctx.activeTab = "timeline"; });
+            i0.ɵɵelement(36, "i", 25);
+            i0.ɵɵtext(37, " Timeline ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "button", 24);
-            i0.ɵɵlistener("click", function AIAgentRunFormComponent_Template_button_click_36_listener() { return ctx.activeTab = "details"; });
-            i0.ɵɵelement(37, "i", 26);
-            i0.ɵɵtext(38, " Details ");
+            i0.ɵɵelementStart(38, "button", 24);
+            i0.ɵɵlistener("click", function AIAgentRunFormComponentExtended_Template_button_click_38_listener() { return ctx.activeTab = "details"; });
+            i0.ɵɵelement(39, "i", 26);
+            i0.ɵɵtext(40, " Details ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(39, "div", 27);
-            i0.ɵɵtemplate(40, AIAgentRunFormComponent_div_40_Template, 6, 8, "div", 28)(41, AIAgentRunFormComponent_div_41_Template, 8, 3, "div", 29);
+            i0.ɵɵelementStart(41, "div", 27);
+            i0.ɵɵtemplate(42, AIAgentRunFormComponentExtended_div_42_Template, 6, 8, "div", 28)(43, AIAgentRunFormComponentExtended_div_43_Template, 10, 3, "div", 29);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(11);
@@ -461,13 +531,17 @@ let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComp
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.record.Status, " ");
             i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 16, ctx.record.StartedAt, "medium"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 18, ctx.record.StartedAt, "medium"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.record.CompletedAt);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record.CompletedAt);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record.Success !== null);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.record.TotalTokensUsed);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.record.TotalCost != null && ctx.record.TotalCost > 0);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.activeTab === "timeline");
             i0.ɵɵadvance(3);
@@ -476,15 +550,19 @@ let AIAgentRunFormComponent = class AIAgentRunFormComponent extends BaseFormComp
             i0.ɵɵproperty("ngIf", ctx.activeTab === "timeline");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.activeTab === "details");
-        } }, dependencies: [i3.NgClass, i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.PanelBarComponent, i5.PanelBarItemComponent, i5.PanelBarContentDirective, i5.SplitterComponent, i5.SplitterPaneComponent, i6.CodeEditorComponent, i7.AIAgentRunTimelineComponent, i3.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid #e0e6ed;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #2196f3, #1976d2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n  color: #ff6358;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n  color: #ff4444;\n  text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: 1px solid #dee2e6;\n  background: white;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid #e9ecef;\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.stat[_ngcontent-%COMP%]   .value.success[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%]   .value.error[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid #dee2e6;\n  background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: #495057;\n  background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  position: relative;\n  height: calc(100vh - 280px);\n  overflow: auto;\n  background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%]    > kendo-panelbar[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fa;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: white;\n  border-bottom: 1px solid #e0e6ed;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: #6b7280;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #2c3e50;\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]:hover {\n  background: rgba(33, 150, 243, 0.08);\n  color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e6ed;\n  overflow: auto;\n}\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.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-height: 0;\n  overflow: auto;\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}"] }); }
+        } }, dependencies: [i3.NgClass, i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.PanelBarComponent, i5.PanelBarItemComponent, i5.PanelBarContentDirective, i5.SplitterComponent, i5.SplitterPaneComponent, i6.CodeEditorComponent, i7.AIAgentRunTimelineComponent, i3.DecimalPipe, i3.DatePipe], styles: [".ai-agent-run-form[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n.header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid #e0e6ed;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #2196f3, #1976d2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 20px;\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.meta-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.parent-run[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link[_ngcontent-%COMP%] {\n  color: #ff6358;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link[_ngcontent-%COMP%]:hover {\n  color: #ff4444;\n  text-decoration: underline;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: #495057;\n}\n\n.run-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"][_ngcontent-%COMP%] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: 1px solid #dee2e6;\n  background: white;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6c757d;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid #e9ecef;\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.stat[_ngcontent-%COMP%]   .value.success[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.stat[_ngcontent-%COMP%]   .value.error[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid #dee2e6;\n  background: #f8f9fa;\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  color: #495057;\n  background: rgba(0,0,0,0.02);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  position: relative;\n  height: calc(100vh - 280px);\n  overflow: auto;\n  background: white;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow: auto;\n}\n\n\n\n.tab-content[ng-reflect-ng-if=\"true\"][_ngcontent-%COMP%]    > kendo-panelbar[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n}\n\n\n\n.json-detail-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fa;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: white;\n  border-bottom: 1px solid #e0e6ed;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: #6b7280;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta[_ngcontent-%COMP%]   .meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #2c3e50;\n  font-weight: 500;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]:hover {\n  background: rgba(33, 150, 243, 0.08);\n  color: #1976d2;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e6ed;\n  overflow: auto;\n}\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.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-height: 0;\n  overflow: auto;\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}"] }); }
 };
-AIAgentRunFormComponent = __decorate([
+AIAgentRunFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agent Runs')
-], AIAgentRunFormComponent);
-export { AIAgentRunFormComponent };
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunFormComponent, [{
+], AIAgentRunFormComponentExtended);
+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            <i class=\"fas fa-robot\"></i>\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n              <span class=\"run-id\">{{ record.ID }}</span>\n              <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n                <i class=\"fas fa-level-up-alt\"></i>\n                <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n              </span>\n            </div>\n          </div>\n        </div>\n        <div class=\"header-right\">\n          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n            {{ record.Status }}\n          </div>\n          <div class=\"header-actions\">\n            <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n              <i class=\"fas fa-sync-alt\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n          <span class=\"label\">Completed</span>\n          <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n          <span class=\"label\">Duration</span>\n          <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.Success !== null\">\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>\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"activeTab = 'timeline'\">\n        <i class=\"fas fa-stream\"></i> Timeline\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"activeTab = 'details'\">\n        <i class=\"fas fa-info-circle\"></i> Details\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content-area\">\n      <!-- Timeline Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n        <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n          <!-- Timeline Pane -->\n          <kendo-splitter-pane [min]=\"'400px'\">\n            <mj-ai-agent-run-timeline\n              [aiAgentRunId]=\"record.ID\"\n              [autoRefresh]=\"record.Status === 'Running'\"\n              [refreshInterval]=\"3000\"\n              (itemSelected)=\"selectTimelineItem($event)\"\n              (navigateToEntity)=\"navigateToEntityRecord($event)\">\n            </mj-ai-agent-run-timeline>\n          </kendo-splitter-pane>\n          \n          <!-- JSON Detail Pane -->\n          <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n            <div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n              <div class=\"json-pane-header\">\n                <h3>\n                  <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n                  {{ selectedTimelineItem.title }}\n                </h3>\n                <button class=\"btn-icon\" (click)=\"closeJsonPanel()\" title=\"Close\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n              <div class=\"json-pane-content\">\n                <div class=\"json-meta\">\n                  <div class=\"meta-item\">\n                    <label>Type</label>\n                    <span>{{ selectedTimelineItem.type }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <label>Status</label>\n                    <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n                      {{ selectedTimelineItem.status }}\n                    </span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <label>Duration</label>\n                    <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n                  </div>\n                </div>\n                \n                <!-- Action-specific link -->\n                <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n                  <button class=\"btn-link\" (click)=\"navigateToActionLog(selectedTimelineItem.data.ID)\">\n                    <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n                  </button>\n                </div>\n                \n                <div class=\"json-viewer\">\n                  <div class=\"json-toolbar\">\n                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(getSelectedItemJson())\">\n                      <i class=\"fas fa-copy\"></i>\n                    </button>\n                  </div>\n                  <mj-code-editor\n                    [(ngModel)]=\"selectedItemJsonString\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: calc(100% - 160px); width: 100%;\">\n                  </mj-code-editor>\n                </div>\n              </div>\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      </div>\n\n      <!-- Details Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n        <kendo-panelbar>\n          <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Run ID</label>\n                  <span>{{ record.ID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent ID</label>\n                  <span>{{ record.AgentID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent Name</label>\n                  <span>{{ agent?.Name || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Parent Run ID</label>\n                  <span>{{ record.ParentRunID || 'None (Root)' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Conversation ID</label>\n                  <span>{{ record.ConversationID || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>User</label>\n                  <span>{{ record.User || 'N/A' }}</span>\n                </div>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Execution Status\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Status</label>\n                  <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n                    {{ record.Status }}\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Success</label>\n                  <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n                    {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n                  </span>\n                </div>\n                <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n                  <label>Error Message</label>\n                  <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                </div>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"result-viewer\">\n                <mj-code-editor\n                  [(ngModel)]=\"record.Result\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"height: 300px; width: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Agent State\" *ngIf=\"record.AgentState\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"state-viewer\">\n                <mj-code-editor\n                  [(ngModel)]=\"record.AgentState\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"height: 400px; width: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n        </kendo-panelbar>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  overflow: auto;\n}\n\n/* Header Styles */\n.header {\n  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid #e0e6ed;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #2196f3, #1976d2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 20px;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: #ff6358;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: #ff4444;\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: #495057;\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.small {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: 1px solid #dee2e6;\n  background: white;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6c757d;\n}\n\n.btn-icon:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid #e9ecef;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.stat .value.success {\n  color: #28a745;\n}\n\n.stat .value.error {\n  color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid #dee2e6;\n  background: #f8f9fa;\n}\n\n.tab {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n  color: #495057;\n  background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  height: calc(100vh - 280px);\n  overflow: auto;\n  background: white;\n}\n\n.tab-content {\n  height: 100%;\n  overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n  height: 100%;\n  overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fa;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: white;\n  border-bottom: 1px solid #e0e6ed;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.json-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta .meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: #6b7280;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: #2c3e50;\n  font-weight: 500;\n}\n\n.action-link {\n  margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link .btn-link:hover {\n  background: rgba(33, 150, 243, 0.08);\n  color: #1976d2;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e6ed;\n  overflow: auto;\n}\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.json-viewer {\n  flex: 1;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-height: 0;\n  overflow: auto;\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}"] }]
+        args: [{ selector: 'mj-ai-agent-run-form', template: "<div class=\"record-form-container ai-agent-run-form\">\n  <div class=\"record-form\">\n    <!-- Header -->\n    <div class=\"header\">\n      <div class=\"header-content\">\n        <div class=\"header-left\">\n          <div class=\"icon-wrapper\">\n            <i class=\"fas fa-robot\"></i>\n          </div>\n          <div class=\"header-info\">\n            <h2>AI Agent Run</h2>\n            <div class=\"meta-info\">\n              <span class=\"agent-name\" *ngIf=\"agent\">{{ agent.Name }}</span>\n              <span class=\"run-id\">{{ record.ID }}</span>\n              <span class=\"parent-run\" *ngIf=\"record.ParentRunID\">\n                <i class=\"fas fa-level-up-alt\"></i>\n                <a (click)=\"navigateToParentRun()\" class=\"parent-link\">Parent Run</a>\n              </span>\n            </div>\n          </div>\n        </div>\n        <div class=\"header-right\">\n          <div class=\"status-badge\" [attr.data-status]=\"record.Status\">\n            <i class=\"fas\" [ngClass]=\"getStatusIcon(record.Status || '')\"></i>\n            {{ record.Status }}\n          </div>\n          <div class=\"header-actions\">\n            <button class=\"btn-icon\" (click)=\"refreshData()\" title=\"Refresh\">\n              <i class=\"fas fa-sync-alt\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat\">\n          <span class=\"label\">Started</span>\n          <span class=\"value\">{{ record.StartedAt | date:'medium' }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n          <span class=\"label\">Completed</span>\n          <span class=\"value\">{{ record.CompletedAt | date:'medium' }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.CompletedAt\">\n          <span class=\"label\">Duration</span>\n          <span class=\"value\">{{ calculateDuration(record.StartedAt, record.CompletedAt) }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.Success !== null\">\n          <span class=\"label\">Result</span>\n          <span class=\"value\" [class.success]=\"record.Success\" [class.error]=\"!record.Success\">\n            {{ record.Success ? 'Success' : 'Failed' }}\n          </span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.TotalTokensUsed\">\n          <span class=\"label\">Tokens</span>\n          <span class=\"value\">{{ record.TotalTokensUsed | number:'1.0-0' }}</span>\n        </div>\n        <div class=\"stat\" *ngIf=\"record.TotalCost != null && record.TotalCost > 0\">\n          <span class=\"label\">Cost</span>\n          <span class=\"value\">${{ record.TotalCost | number:'1.2-4' }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tabs -->\n    <div class=\"tabs\">\n      <button class=\"tab\" [class.active]=\"activeTab === 'timeline'\" (click)=\"activeTab = 'timeline'\">\n        <i class=\"fas fa-stream\"></i> Timeline\n      </button>\n      <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"activeTab = 'details'\">\n        <i class=\"fas fa-info-circle\"></i> Details\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"content-area\">\n      <!-- Timeline Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'timeline'\" style=\"height: 100%;\">\n        <kendo-splitter style=\"height: 100%;\" orientation=\"horizontal\">\n          <!-- Timeline Pane -->\n          <kendo-splitter-pane [min]=\"'400px'\">\n            <mj-ai-agent-run-timeline\n              [aiAgentRunId]=\"record.ID\"\n              [autoRefresh]=\"record.Status === 'Running'\"\n              [refreshInterval]=\"3000\"\n              (itemSelected)=\"selectTimelineItem($event)\"\n              (navigateToEntity)=\"navigateToEntityRecord($event)\">\n            </mj-ai-agent-run-timeline>\n          </kendo-splitter-pane>\n          \n          <!-- JSON Detail Pane -->\n          <kendo-splitter-pane [size]=\"'45%'\" [min]=\"'300px'\" [collapsed]=\"!selectedTimelineItem\">\n            <div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\n              <div class=\"json-pane-header\">\n                <h3>\n                  <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n                  {{ selectedTimelineItem.title }}\n                </h3>\n                <button class=\"btn-icon\" (click)=\"closeJsonPanel()\" title=\"Close\">\n                  <i class=\"fas fa-times\"></i>\n                </button>\n              </div>\n              <div class=\"json-pane-content\">\n                <div class=\"json-meta\">\n                  <div class=\"meta-item\">\n                    <label>Type</label>\n                    <span>{{ selectedTimelineItem.type }}</span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <label>Status</label>\n                    <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n                      {{ selectedTimelineItem.status }}\n                    </span>\n                  </div>\n                  <div class=\"meta-item\">\n                    <label>Duration</label>\n                    <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n                  </div>\n                </div>\n                \n                <!-- Action-specific link -->\n                <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\n                  <button class=\"btn-link\" (click)=\"navigateToActionLog(selectedTimelineItem.data.ID)\">\n                    <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n                  </button>\n                </div>\n                \n                <div class=\"json-viewer\">\n                  <div class=\"json-toolbar\">\n                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(getSelectedItemJson())\">\n                      <i class=\"fas fa-copy\"></i>\n                    </button>\n                  </div>\n                  <mj-code-editor\n                    [(ngModel)]=\"selectedItemJsonString\"\n                    [language]=\"'json'\"\n                    [readonly]=\"true\"\n                    style=\"height: calc(100% - 160px); width: 100%;\">\n                  </mj-code-editor>\n                </div>\n              </div>\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      </div>\n\n      <!-- Details Tab -->\n      <div class=\"tab-content\" *ngIf=\"activeTab === 'details'\">\n        <kendo-panelbar>\n          <kendo-panelbar-item title=\"General Information\" [expanded]=\"true\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Run ID</label>\n                  <span>{{ record.ID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent ID</label>\n                  <span>{{ record.AgentID }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Agent Name</label>\n                  <span>{{ agent?.Name || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Parent Run ID</label>\n                  <span>{{ record.ParentRunID || 'None (Root)' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Conversation ID</label>\n                  <span>{{ record.ConversationID || 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>User</label>\n                  <span>{{ record.User || 'N/A' }}</span>\n                </div>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Execution Status\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Status</label>\n                  <span class=\"status-badge\" [attr.data-status]=\"record.Status\">\n                    {{ record.Status }}\n                  </span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Success</label>\n                  <span [class.success]=\"record.Success\" [class.error]=\"record.Success === false\">\n                    {{ record.Success === null ? 'In Progress' : (record.Success ? 'Yes' : 'No') }}\n                  </span>\n                </div>\n                <div class=\"detail-item full-width\" *ngIf=\"record.ErrorMessage\">\n                  <label>Error Message</label>\n                  <div class=\"error-message\">{{ record.ErrorMessage }}</div>\n                </div>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Usage & Cost\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"details-grid\">\n                <div class=\"detail-item\">\n                  <label>Total Tokens Used</label>\n                  <span>{{ record.TotalTokensUsed ? (record.TotalTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Prompt Tokens</label>\n                  <span>{{ record.TotalPromptTokensUsed ? (record.TotalPromptTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Completion Tokens</label>\n                  <span>{{ record.TotalCompletionTokensUsed ? (record.TotalCompletionTokensUsed | number:'1.0-0') : 'N/A' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <label>Total Cost</label>\n                  <span>{{ record.TotalCost != null ? ('$' + (record.TotalCost | number:'1.2-4')) : 'N/A' }}</span>\n                </div>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Result\" *ngIf=\"record.Result\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"result-viewer\">\n                <mj-code-editor\n                  [(ngModel)]=\"record.Result\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"height: 300px; width: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n          \n          <kendo-panelbar-item title=\"Agent State\" *ngIf=\"record.AgentState\">\n            <ng-template kendoPanelBarContent>\n              <div class=\"state-viewer\">\n                <mj-code-editor\n                  [(ngModel)]=\"record.AgentState\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"height: 400px; width: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-panelbar-item>\n        </kendo-panelbar>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".ai-agent-run-form {\n  height: 100%;\n  overflow: auto;\n}\n\n/* Header Styles */\n.header {\n  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid #e0e6ed;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #2196f3, #1976d2);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 20px;\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.parent-run {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.parent-link {\n  color: #ff6358;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.parent-link:hover {\n  color: #ff4444;\n  text-decoration: underline;\n}\n\n.agent-name {\n  font-weight: 500;\n  color: #495057;\n}\n\n.run-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: #d4edda;\n  color: #155724;\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: #f8d7da;\n  color: #721c24;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: #fff3cd;\n  color: #856404;\n}\n\n.status-badge[data-status=\"Paused\"] {\n  background: #e2e3e5;\n  color: #383d41;\n}\n\n.status-badge.small {\n  padding: 4px 12px;\n  font-size: 11px;\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: 1px solid #dee2e6;\n  background: white;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6c757d;\n}\n\n.btn-icon:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid #e9ecef;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n.stat .value.success {\n  color: #28a745;\n}\n\n.stat .value.error {\n  color: #dc3545;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid #dee2e6;\n  background: #f8f9fa;\n}\n\n.tab {\n  padding: 12px 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  color: #6c757d;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  transition: all 0.2s ease;\n  border-bottom: 3px solid transparent;\n}\n\n.tab:hover {\n  color: #495057;\n  background: rgba(0,0,0,0.02);\n}\n\n.tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n/* Content Area */\n.content-area {\n  position: relative;\n  height: calc(100vh - 280px);\n  overflow: auto;\n  background: white;\n}\n\n.tab-content {\n  height: 100%;\n  overflow: auto;\n}\n\n/* Details tab specific */\n.tab-content[ng-reflect-ng-if=\"true\"] > kendo-panelbar {\n  height: 100%;\n  overflow-y: auto;\n}\n\n/* JSON Detail Pane */\n.json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fa;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  background: white;\n  border-bottom: 1px solid #e0e6ed;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.json-pane-header h3 i {\n  color: #6b7280;\n  font-size: 14px;\n}\n\n.json-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.json-meta {\n  display: flex;\n  gap: 20px;\n  margin-bottom: 16px;\n  flex-wrap: wrap;\n}\n\n.json-meta .meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.json-meta .meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: #6b7280;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n}\n\n.json-meta .meta-item span {\n  font-size: 14px;\n  color: #2c3e50;\n  font-weight: 500;\n}\n\n.action-link {\n  margin-bottom: 12px;\n}\n\n.action-link .btn-link {\n  background: none;\n  border: none;\n  color: #2196f3;\n  font-size: 14px;\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.action-link .btn-link:hover {\n  background: rgba(33, 150, 243, 0.08);\n  color: #1976d2;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: 8px;\n  border: 1px solid #e0e6ed;\n  overflow: auto;\n}\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.json-viewer {\n  flex: 1;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-height: 0;\n  overflow: auto;\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}"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponent, { className: "AIAgentRunFormComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunFormComponentExtended, { className: "AIAgentRunFormComponentExtended", filePath: "src/lib/custom/ai-agent-run/ai-agent-run.component.ts", lineNumber: 19 }); })();
+// Loader function for AIAgentRunFormComponent
+export function LoadAIAgentRunFormComponent() {
+    // This function is called to ensure the form is loaded
+}
 //# sourceMappingURL=ai-agent-run.component.js.map